入れ子オブジェクトから動的ドロップダウンを作成する方法

Question

入れ子になった配列オブジェクトから動的に2番目のドロップダウンをドロップする方法。私は最初のドロップダウンデータを得ることができますが、最初の選択リストを選択すると、プロセッサのリストを持って来たいです。

My Jsonのデータは以下のとおりです。

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

 
//And my code snippet is as below. 
 

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

 
$('#processor').on("change", function (e) { 
 
\t 
 
\t var selected = $(this).val();  \t 
 
\t var item = cpumanufacturers[0].values[selected];  \t 
 
\t 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> 
 
\t <select id="processor" class="pcspecinput"> 
 

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

 

Answer 1

あなたは、最初のドロップダウンから選択したメーカーのすべてのpmodel値を選択してから、2番目のドロップダウンにこれらの値を追加見つける必要があります。

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

 
//And my code snippet is as below. 
 

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

 
$('#processor').on("change", function (e) { 
 
\t 
 
\t 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>"); 
 
    }) 
 
\t 
 
}); 
 

 
$('#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> 
 
\t <select id="processor" class="pcspecinput"> 
 

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