如何从嵌套对象

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值，然后将这些值附加到第二个下拉列表中。

＆＃13;

＆＃13;

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');

＆＃13;

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

 

＆＃13;

＆＃13;

＆＃13;