如何從嵌套對象創建動態下拉菜單

如何使第二個選擇從嵌套數組對象動態下拉。我能夠得到第一個下拉數據，但在我想要帶來處理器列表的第一個選擇列表中選擇。如何從嵌套對象創建動態下拉菜單

我的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>

來源

2017-07-27 krish kr

，你需要找到所有pmodel值選定製造商從第一個下拉選擇，然後將這些值下降附加到第二次下降。

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>

來源

2017-07-27 04:21:49 Dij

如何從嵌套對象創建動態下拉菜單

回答

相關問題