Dynamic Dropdown Options List with jQuery $.each Code Example
Let us try to demonstrate Dynamic Dropdown Options List with jQuery $.each with one example of Fruits and Veggies suggested to a person in his/her diet plan. We will explain in three different situations when we have 3-set of different data structures:-
- When Data in Array of JSON Objects Format
- When Data in JSON Object Format
- When Data in JS Object Format
Let us put below data structures for more clarity:-
<script >
///////////////////// BOF Example 1 DropDown: When Data in Array of JSON Objects Format //////////////////////
const fruits = [{
"Yellow": "Mango"
},
{
"Red": "Lichi"
},
{
"Orange": "Orange"
}
];
const veggies = [{
"Green": "Broccoli"
},
{
"Yellow": "Lemon"
},
{
"Purple": "Beets"
}
];
</script>
<script >
///////////////////// BOF Example 2 DropDown: When Data in JSON Object Format //////////////////////
const fruits2 = {"Yellow": "Mango - As Json Object", "Red": "Lichi","Orange": "Orange"}
const veggies2 = {"Green": "Broccoli - As Json Object", "Yellow": "Lemon", "Purple": "Beets"}
</script>
<script >
///////////////////// BOF Example 3 DropDown: When Data in JS Object Format //////////////////////
const fruits3 = {Yellow: "Mango - As Js Object", Red: "Lichi",Orange: "Orange"}
const veggies3 = {Green: "Broccoli - As Js Object", Yellow: "Lemon", Purple: "Beets"}
</script>
Js Code Snippet Example in 3 different Situations
<script >
//////////////////////////////////// BOF Example 1 DropDown //////////////////////////////////////////////
const fruits = [{
"Yellow": "Mango"
},
{
"Red": "Lichi"
},
{
"Orange": "Orange"
}
];
const veggies = [{
"Green": "Broccoli"
},
{
"Yellow": "Lemon"
},
{
"Purple": "Beets"
}
];
$(document).ready(function(){
$("#diet_plan").change(function(){
var eatables_list = $(this).val();
//alert(eatables_list);
// Check what user has selected: if it is Fruits
if (eatables_list == 'Fruits') {
// Assign json array fruits to var eatables_list
eatables_list = fruits;
var myoptions = ' <option value="">Fruits in Diet Plan </option>';
}
// Check what user has selected: if it is Veggies
if (eatables_list == 'Veggies') {
// Assign json array veggies to var eatables_list
eatables_list = veggies;
var myoptions = ' <option value="">Veggies in Diet Plan </option >';
}
$.each(eatables_list, function(){
$.each(this, function(name, value){
//alert(value);
myoptions += ' <option value="' + name + '">' + value + ' </option>';
console.log(`${name} = ${value}`);
});
});
$('#eatables_list').html(myoptions);
//`alert(myoptions);
}); //change
}); //ready
//////////////////////////////////// EOF Example 1 DropDown //////////////////////////////////////////////
</script >
<script >
//////////////////////////////////// BOF Example 2 DropDown //////////////////////////////////////////////
const fruits2 = {"Yellow": "Mango - As Json Object", "Red": "Lichi","Orange": "Orange"}
const veggies2 = {"Green": "Broccoli - As Json Object", "Yellow": "Lemon", "Purple": "Beets"}
$(document).ready(function(){
$("#diet_plan2").change(function(){
var eatables_list2 = $(this).val();
//alert(eatables_list2);
// Check what user has selected: if it is Fruits
if (eatables_list2 == 'Fruits') {
// Assign json array fruits to var eatables_list
eatables_list2 = fruits2;
var myoptions2 = '<option value="">Fruits in Diet Plan</option>';
}
// Check what user has selected: if it is Veggies
if (eatables_list2 == 'Veggies') {
// Assign json array veggies to var eatables_list
eatables_list2 = veggies2;
var myoptions2 = ' <option value="">Veggies in Diet Plan </option>';
}
$.each(eatables_list2, function(name, value){
//alert(value);
myoptions2 += ' <option value="' + name + '">' + value + ' </option>';
console.log(`${name} = ${value}`);
});
$('#eatables_list2').html(myoptions2);
//`alert(myoptions);
}); //change
}); //ready
//////////////////////////////////// EOF Example 2 DropDown //////////////////////////////////////////////
</script >
<script >
//////////////////////////////////// BOF Example 3 DropDown //////////////////////////////////////////////
const fruits3 = {Yellow: "Mango - As Js Object", Red: "Lichi",Orange: "Orange"}
const veggies3 = {Green: "Broccoli - As Js Object", Yellow: "Lemon", Purple: "Beets"}
$(document).ready(function(){
//alert(veggies3.Yellow);
$("#diet_plan3").change(function(){
var eatables_list3 = $(this).val();
//alert(eatables_list3);
// Check what user has selected: if it is Fruits
if (eatables_list3 == 'Fruits') {
// Assign json array fruits to var eatables_list
eatables_list3 = fruits3;
var myoptions3 = ' <option value="">Fruits in Diet Plan </option >';
}
// Check what user has selected: if it is Veggies
if (eatables_list3 == 'Veggies') {
// Assign json array veggies to var eatables_list
eatables_list3 = veggies3;
var myoptions3 = ' <option value="">Veggies in Diet Plan </option>';
}
$.each(eatables_list3, function(name, value){
//alert(value);
myoptions3 += ' <option value="' + name + '">' + value + ' </option>';
console.log(`${name} = ${value}`);
});
$('#eatables_list3').html(myoptions3);
//`alert(myoptions);
}); //change
}); //ready
//////////////////////////////////// EOF Example 3 DropDown //////////////////////////////////////////////
</script >
HTML Code Snippet
Live Demo
Example 1: When Data in Array of JSON Objects Format
Example 2: When Data in JSON Object Format
Example 3: When Data in JS Object Format
Download Code for Dynamic Dropdown Options List with jQuery $.each Loop