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