Dynamic Dropdown Options List with jQuery $.each Code Example

Last Updated on April 10, 2023 by Subhash Jain

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

<div class="container">

<div class="row">
<!-- BOF Example 1 -->
    
    <div class="col-sm-4">
    <h3>Example 1: When Data in Array of JSON Objects Format</h3>
        <form role="form" id="inquiryForm" name="inquiryForm">

        

            <div class="form-group">
                <select id="diet_plan" class="form-control">
                    <option value=''><strong>Diet Plan</strong></option>
                    <option value="Fruits">Fruits</option>
                    <option value="Veggies">Veggies</option>
                </select>
            </div>
            <div class="form-group">
                <select id="eatables_list" class="form-control">

                </select>
            </div>

            <p>
            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
            </p>

        </form>
    </div>

<!-- EOF Example 1 -->
<!-- BOF Example 2 -->

    <div class="col-sm-4">
    <h3>Example 2: When Data in JSON Object Format</h3>
        <form role="form" id="inquiryForm2" name="inquiryForm2">

        

            <div class="form-group">
                <select id="diet_plan2" class="form-control">
                    <option value=''><strong>Diet Plan</strong></option>
                    <option value="Fruits">Fruits</option>
                    <option value="Veggies">Veggies</option>
                </select>
            </div>
            <div class="form-group">
                <select id="eatables_list2" class="form-control">

                </select>
            </div>

            <p>
            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
            </p>

        </form>
    </div>


    
<!-- EOF Example 2 -->

<!-- BOF Example 3 -->

<div class="col-sm-4">
    <h3>Example 3: When Data in JS Object Format</h3>
        <form role="form" id="inquiryForm3" name="inquiryForm3">

        

            <div class="form-group">
                <select id="diet_plan3" class="form-control">
                    <option value=''><strong>Diet Plan</strong></option>
                    <option value="Fruits">Fruits</option>
                    <option value="Veggies">Veggies</option>
                </select>
            </div>
            <div class="form-group">
                <select id="eatables_list3" class="form-control">

                </select>
            </div>

            <p>
            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
            </p>

        </form>
    </div>


    
<!-- EOF Example 3 -->
</div> <!-- row div close -->
</div>     <!-- container div close -->