如何使用 jquery 和 json 数组从另一个选择中的选择中填充一个选择

Question

这是我的选择和一个 json 数组，我可以使用它来根据选择填充第二个 div。

我想先删除第二个选择选项，然后填充选项并将所选值设置为第一项

<select name="select1" id="select1" class="form-control">
    <option value="2">Theme 1</option>
    <option value="1">Theme 2</option>
    <option value="0">unnamed theme</option>
</select>

<select name="select2" id="select2" class="form-control">
    <option value="49">Products</option>
</select>

json 数组（使用 PHP 从数据库值创建以将其回显）

{"2":{"49":"Products"},"1":{"48":"Product 48","50":"Opportunity","51":"Enroll"},"0":{"52":"Discover product 52","53":"Moringa Support","54":"Product 54","55":"product 55"}}

Answer 1

以下是我将如何做到这一点。

基本上它是这样工作的：

• 在您的第一次选择中添加课程select-master
• 添加数据属性select-info，其值为保存所需JSON的变量的名称
• 添加一个数据属性select-slave，其值为第二个选择框的选择器
• 将事件处理程序附加到类select-master 的任何选择上
• 当select-master 发生变化时，使用选定的值从 JSON 中获取选项，获取第二个选择，用选项填充它

注意，我更改了您的 JSON 的结构。我这样做是为了让结构有意义。

$('.select-master').change(function(){
     var $this = $(this);
     var val = $this.val();
     var possibleSelections =window[$this.data('select-info')]; // get the JSON for this box, you could store the JSON in the data attribute itself but this method makes it easier to use the same JSON for multiple boxes easily if needed
     var $slave = $($this.data('select-slave')).html(''); // get the selector for the other select box, find the box, and clear it's contents all in one go
     var selection = possibleSelections[val];
     if(selection){
         $.each(selection.options,function(i,option){
             var selected = i == 0 ? 'selected' : '';
             $slave.append('<option selected="'+selected+'" value="'+option.value+'">'+option.text+'</option>');
         });
     }
});

var selections = {
  "0": {
    options: [{
      value: 52,
      text: "Discover product 52"
    }, {
      value: 53,
      text: "Moringa Support"
    }, {
      value: 54,
      text: "Product 54"
    }, {
      value: 55,
      text: "product 55"
    }]
  },
  "1": {
    options: [{
      value: 48,
      text: "Product 48"
    }, {
      value: 50,
      text: "Opportunity"
    }, {
      value: 51,
      text: "Enroll"
    }]
  },
  "2": {
    options: [{
      value: 49,
      text: "Products"
    }]
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="select1" id="select1" class="form-control select-master" data-select-slave="#select2" data-select-info="selections">
  <option value="2">Theme 1</option>
  <option value="1">Theme 2</option>
  <option value="0">unnamed theme</option>
</select>

<select name="select2" id="select2" class="form-control">
  <option value="49">Products</option>
</select>