krish kr krish kr - 1 year ago 91
Javascript Question

How to create dynamic dropdown from nested object

How to bring the second selection drop down dynamically from the nested array objects. i am able to get the first drop down data but on select of the fist selection list i want to bring the list of processors.

My Json data is as below.



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>





Dij Dij
Answer Source

you need to find all pmodel values for a selected manufacturers from the first dropdown select and then append these values to the second drop down.

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>

 

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download