如何从嵌套对象创建动态下拉列表

Question

如何从嵌套数组对象中动态地下拉第二个 selection。我能够获得第一个下拉数据，但是在第一个 selection 列表的 select 上，我想带上处理器列表。

我的Json数据如下。

var cpumanufacturers = [
   {
       "name": "Intel",
       "values": [
         {
           "Intel Bulldozer Processors": [
             "Intel Bulldozer 1",
             "Intel Bulldozer 2",
             "Intel Bulldozer 3",
             "Intel Bulldozer 4",
             "Intel Bulldozer 5"
           ]
         },                          
         {
           "Intel Ryzen Processors": [
             "Intel Ryzen 1",
             "Intel Ryzen 2",
             "Intel Ryzen 3",
             "Intel Ryzen 4",
             "Intel Ryzen 5"
           ]
         }
       ]
     },
     {
       "name": "AMD",
       "values": [
         {
           "AMD Bulldozer Processors": [
             "AMD Bulldozer 1",
             "AMD Bulldozer 2",
             "AMD Bulldozer 3",
             "AMD Bulldozer 4",
             "AMD Bulldozer 5"
           ]
         },            
         {
           "AMD Ryzen Processors": [
             "AMD Ryzen 1",
             "AMD Ryzen 2",
             "AMD Ryzen 3",
             "AMD Ryzen 4",
             "AMD Ryzen 5"
           ]
         }
       ]
     }
   ];

//And my code snippet is as below.

for(var i = 0; i < cpumanufacturers.length; i++) {   
   var cpumanufacturer = cpumanufacturers[i].values.map( k => Object.keys(k).shift());   
   var optgroup = $("<optgroup>").prop("label", cpumanufacturers[i].name);
   for(var model = 0; model < cpumanufacturer.length; model++){    
    optgroup.append($("<option>").text(cpumanufacturer[model]));
   }   
   $("#processor").append(optgroup);   
  }

$('#processor').on("change", function (e) {
 
 var selected = $(this).val();     
 var item = cpumanufacturers[0].values[selected];     
 jQuery("#pmodel").append($("<option>").text(cpumanufacturers[0].values[selected]));
    //secondSelect.empty().append("<option value='' >select</option>").change();
});

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

<label for="processor" class="pcspeclabel">*CPU Manufacturer</label><br>
 <select id="processor" class="pcspecinput">

 </select> 
 <label for="pmodel" class="pcspeclabel">*CPU Model</label>
 <select id="pmodel" class="pcspecinput"></select>

Answer 1

您需要从第一个下拉列表 select 中找到 selected 制造商的所有 pmodel 值，然后将这些值附加到第二个下拉列表中。

var cpumanufacturers = [
   {
       "name": "Intel",
       "values": [
         {
           "Intel Bulldozer Processors": [
             "Intel Bulldozer 1",
             "Intel Bulldozer 2",
             "Intel Bulldozer 3",
             "Intel Bulldozer 4",
             "Intel Bulldozer 5"
           ]
         },                          
         {
           "Intel Ryzen Processors": [
             "Intel Ryzen 1",
             "Intel Ryzen 2",
             "Intel Ryzen 3",
             "Intel Ryzen 4",
             "Intel Ryzen 5"
           ]
         }
       ]
     },
     {
       "name": "AMD",
       "values": [
         {
           "AMD Bulldozer Processors": [
             "AMD Bulldozer 1",
             "AMD Bulldozer 2",
             "AMD Bulldozer 3",
             "AMD Bulldozer 4",
             "AMD Bulldozer 5"
           ]
         },            
         {
           "AMD Ryzen Processors": [
             "AMD Ryzen 1",
             "AMD Ryzen 2",
             "AMD Ryzen 3",
             "AMD Ryzen 4",
             "AMD Ryzen 5"
           ]
         }
       ]
     }
   ];

//And my code snippet is as below.

for(var i = 0; i < cpumanufacturers.length; i++) {   
   var cpumanufacturer = cpumanufacturers[i].values.map( k => Object.keys(k).shift());   
   var optgroup = $("<optgroup>").prop("label", cpumanufacturers[i].name);
   for(var model = 0; model < cpumanufacturer.length; model++){    
    optgroup.append($("<option>").text(cpumanufacturer[model]));
   }   
   $("#processor").append(optgroup);   
  }

$('#processor').on("change", function (e) {
 
 var selected = $(this).val(); 
    var pmodelValues = [];
    for(var i=0; i<cpumanufacturers.length && !pmodelValues.length; i++){
        var values = cpumanufacturers[i].values;
        for(var j=0; j<values.length;j++){
            if(selected in values[j]){
               pmodelValues = values[j][selected];
               break;
            }
        }
    }
    $("#pmodel").html("");
    pmodelValues.forEach(function(opt){
         $("#pmodel").append("<option>"+opt+"</option>");
    })
 
});

$('#processor').trigger('change');

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

<label for="processor" class="pcspeclabel">*CPU Manufacturer</label><br>
 <select id="processor" class="pcspecinput">

 </select> 
 <label for="pmodel" class="pcspeclabel">*CPU Model</label>
 <select id="pmodel" class="pcspecinput"></select>

如何从嵌套对象创建动态下拉列表

How to create dynamic dropdown from nested object

javascript

jquery

json

html-select

drop-down-menu