如何從嵌套對象創建動態下拉列表

Question

如何使第二個選擇從嵌套數組對象動態下拉。 我能夠獲得第一個下拉數據，但是在選擇拳頭選擇列表時，我想帶上處理器列表。

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

您需要從第一個下拉列表中找到選定制造商的所有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>