{"id":1322,"date":"2022-07-18T09:56:51","date_gmt":"2022-07-18T09:56:51","guid":{"rendered":"https:\/\/samyakonline.biz\/blog\/?p=1322"},"modified":"2023-04-10T12:32:09","modified_gmt":"2023-04-10T12:32:09","slug":"dynamic-dropdown-options-list-with-jquery-code-example","status":"publish","type":"post","link":"https:\/\/samyakonline.biz\/blog\/dynamic-dropdown-options-list-with-jquery-code-example.html","title":{"rendered":"Dynamic Dropdown Options List with jQuery $.each Code Example"},"content":{"rendered":"<p class=\"post-modified-info\">Last Updated on April 10, 2023 by <a href=\"https:\/\/samyakonline.biz\/blog\/author\/samyakonline\" class=\"last-modified-author\">Subhash Jain<\/a><\/p>\n\n\n<p>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:-<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When Data in Array of JSON Objects Format<\/li>\n\n\n\n<li>When Data in JSON Object Format<\/li>\n\n\n\n<li>When Data in JS Object Format<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Let us put below data structures for more clarity:-<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script &gt; \n    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ BOF Example 1 DropDown: When Data in Array of JSON Objects Format \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\t\tconst fruits = &#91;{\n\t\t\t\t\"Yellow\": \"Mango\"\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"Red\": \"Lichi\"\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"Orange\": \"Orange\"\n\t\t\t}\n\t\t];\n\n\t\tconst veggies = &#91;{\n\t\t\t\t\"Green\": \"Broccoli\"\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"Yellow\": \"Lemon\"\n\t\t\t},\n            {\n\t\t\t\t\"Purple\": \"Beets\"\n\t\t\t}\n            \n\t\t];\n    \n    &lt;\/script&gt;\n\n    &lt;script &gt; \n    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ BOF Example 2 DropDown: When Data in JSON Object Format \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n     const fruits2 = {\"Yellow\": \"Mango - As Json Object\", \"Red\": \"Lichi\",\"Orange\": \"Orange\"}\n\t const veggies2 = {\"Green\": \"Broccoli - As Json Object\", \"Yellow\": \"Lemon\", \"Purple\": \"Beets\"}\n    &lt;\/script&gt;\n\n    &lt;script &gt;\n    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ BOF Example 3 DropDown: When Data in JS Object Format \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n     const fruits3 = {Yellow: \"Mango - As Js Object\", Red: \"Lichi\",Orange: \"Orange\"}\n\t const veggies3 = {Green: \"Broccoli - As Js Object\", Yellow: \"Lemon\", Purple: \"Beets\"}\n    &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Js Code Snippet Example in 3 different Situations<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script &gt; \n\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ BOF Example 1  DropDown \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\t\tconst fruits = &#91;{\n\t\t\t\t\"Yellow\": \"Mango\"\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"Red\": \"Lichi\"\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"Orange\": \"Orange\"\n\t\t\t}\n\t\t];\n\n\t\tconst veggies = &#91;{\n\t\t\t\t\"Green\": \"Broccoli\"\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"Yellow\": \"Lemon\"\n\t\t\t},\n            {\n\t\t\t\t\"Purple\": \"Beets\"\n\t\t\t}\n            \n\t\t];\n\n\n\n\t\t$(document).ready(function(){\n\t\t\t$(\"#diet_plan\").change(function(){\n\n\t\t\t\tvar eatables_list = $(this).val();\n\t\t\t\t\/\/alert(eatables_list);\n\n                \/\/ Check what user has selected: if it is Fruits\n\t\t\t\tif (eatables_list == 'Fruits') {\n                    \/\/ Assign json array fruits to var eatables_list\n                    eatables_list = fruits;\n\t\t\t\t\tvar myoptions = ' &lt;option value=\"\"&gt;Fruits in Diet Plan &lt;\/option&gt;';\n                }\n                \/\/ Check what user has selected: if it is Veggies\n                if (eatables_list == 'Veggies') {\n                     \/\/ Assign json array veggies to var eatables_list\n                    eatables_list = veggies;\n\t\t\t\t\tvar myoptions = ' &lt;option value=\"\"&gt;Veggies in Diet Plan &lt;\/option &gt;';\n                }\n\n\t\t\t\t\t$.each(eatables_list, function(){\n\t\t\t\t\t\t$.each(this, function(name, value){\n\n\t\t\t\t\t\t\t\/\/alert(value);\n\t\t\t\t\t\t\tmyoptions += ' &lt;option value=\"' + name + '\"&gt;' + value + ' &lt;\/option&gt;';\n\t\t\t\t\t\t\tconsole.log(`${name} = ${value}`);\n\n\t\t\t\t\t\t});\n\t\t\t\t\t});\n\t\t\t\t\t$('#eatables_list').html(myoptions);\n\t\t\t\t\t\/\/`alert(myoptions);\t\t\n\n\t\t\t}); \/\/change\t\n\t\t}); \/\/ready\t\n\n\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ EOF Example 1  DropDown \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\t &lt;\/script &gt; \n\n\n &lt;script &gt; \n\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ BOF Example 2  DropDown \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\t\tconst fruits2 = {\"Yellow\": \"Mango - As Json Object\", \"Red\": \"Lichi\",\"Orange\": \"Orange\"}\n\t\tconst veggies2 = {\"Green\": \"Broccoli - As Json Object\", \"Yellow\": \"Lemon\", \"Purple\": \"Beets\"}\n\n\n\t\t$(document).ready(function(){\n\t\t\t$(\"#diet_plan2\").change(function(){\n\n\t\t\t\tvar eatables_list2 = $(this).val();\n\t\t\t\t\/\/alert(eatables_list2);\n\n                \/\/ Check what user has selected: if it is Fruits\n\t\t\t\tif (eatables_list2 == 'Fruits') {\n                    \/\/ Assign json array fruits to var eatables_list\n                    eatables_list2 = fruits2;\n\t\t\t\t\tvar myoptions2 = '&lt;option value=\"\"&gt;Fruits in Diet Plan&lt;\/option&gt;';\n                }\n                \/\/ Check what user has selected: if it is Veggies\n                if (eatables_list2 == 'Veggies') {\n                     \/\/ Assign json array veggies to var eatables_list\n                    eatables_list2 = veggies2;\n\t\t\t\t\tvar myoptions2 = ' &lt;option value=\"\"&gt;Veggies in Diet Plan &lt;\/option&gt;';\n                }\n\n\t\t\t\t\t$.each(eatables_list2, function(name, value){\n\t\t\t\t\t\t\t\/\/alert(value);\n\t\t\t\t\t\t\tmyoptions2 += ' &lt;option value=\"' + name + '\"&gt;' + value + ' &lt;\/option&gt;';\n\t\t\t\t\t\t\tconsole.log(`${name} = ${value}`);\n\n\t\t\t\t\t});\n\t\t\t\t\t$('#eatables_list2').html(myoptions2);\n\t\t\t\t\t\/\/`alert(myoptions);\t\t\n\n\t\t\t}); \/\/change\t\n\t\t}); \/\/ready\t\n\n\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/  EOF Example 2  DropDown  \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\t &lt;\/script &gt; \n\n &lt;script &gt; \n\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ BOF Example 3  DropDown \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\t\tconst fruits3 = {Yellow: \"Mango - As Js Object\", Red: \"Lichi\",Orange: \"Orange\"}\n\t\tconst veggies3 = {Green: \"Broccoli - As Js Object\", Yellow: \"Lemon\", Purple: \"Beets\"}\n\n\n\t\t$(document).ready(function(){\n            \/\/alert(veggies3.Yellow);\n\t\t\t$(\"#diet_plan3\").change(function(){\n              \n\n\t\t\t\tvar eatables_list3 = $(this).val();\n\t\t\t\t\/\/alert(eatables_list3);\n\n                \/\/ Check what user has selected: if it is Fruits\n\t\t\t\tif (eatables_list3 == 'Fruits') {\n                    \/\/ Assign json array fruits to var eatables_list\n                    eatables_list3 = fruits3;\n\t\t\t\t\tvar myoptions3 = ' &lt;option value=\"\"&gt;Fruits in Diet Plan &lt;\/option &gt;';\n                }\n                \/\/ Check what user has selected: if it is Veggies\n                if (eatables_list3 == 'Veggies') {\n                     \/\/ Assign json array veggies to var eatables_list\n                    eatables_list3 = veggies3;\n\t\t\t\t\tvar myoptions3 = ' &lt;option value=\"\"&gt;Veggies in Diet Plan &lt;\/option&gt;';\n                }\n\n\t\t\t\t\t$.each(eatables_list3, function(name, value){\n\t\t\t\t\t\t\t\/\/alert(value);\n\t\t\t\t\t\t\tmyoptions3 += ' &lt;option value=\"' + name + '\"&gt;' + value + ' &lt;\/option&gt;';\n\t\t\t\t\t\t\tconsole.log(`${name} = ${value}`);\n\n\t\t\t\t\t});\n\t\t\t\t\t$('#eatables_list3').html(myoptions3);\n\t\t\t\t\t\/\/`alert(myoptions);\t\t\n\n\t\t\t}); \/\/change\t\n\t\t}); \/\/ready\t\n\n\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/  EOF Example 3 DropDown  \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\t &lt;\/script &gt; <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Code Snippet<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n\n&lt;div class=\"row\"&gt;\n&lt;!-- BOF Example 1 --&gt;\n    \n    &lt;div class=\"col-sm-4\"&gt;\n    &lt;h3&gt;Example 1: When Data in Array of JSON Objects Format&lt;\/h3&gt;\n        &lt;form role=\"form\" id=\"inquiryForm\" name=\"inquiryForm\"&gt;\n\n        \n\n            &lt;div class=\"form-group\"&gt;\n                &lt;select id=\"diet_plan\" class=\"form-control\"&gt;\n                    &lt;option value=''&gt;&lt;strong&gt;Diet Plan&lt;\/strong&gt;&lt;\/option&gt;\n                    &lt;option value=\"Fruits\"&gt;Fruits&lt;\/option&gt;\n                    &lt;option value=\"Veggies\"&gt;Veggies&lt;\/option&gt;\n                &lt;\/select&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"form-group\"&gt;\n                &lt;select id=\"eatables_list\" class=\"form-control\"&gt;\n\n                &lt;\/select&gt;\n            &lt;\/div&gt;\n\n            &lt;p&gt;\n            &lt;button type=\"submit\" class=\"btn btn-primary btn-lg\"&gt;Submit&lt;\/button&gt;\n            &lt;\/p&gt;\n\n        &lt;\/form&gt;\n    &lt;\/div&gt;\n\n&lt;!-- EOF Example 1 --&gt;\n&lt;!-- BOF Example 2 --&gt;\n\n    &lt;div class=\"col-sm-4\"&gt;\n    &lt;h3&gt;Example 2: When Data in JSON Object Format&lt;\/h3&gt;\n        &lt;form role=\"form\" id=\"inquiryForm2\" name=\"inquiryForm2\"&gt;\n\n        \n\n            &lt;div class=\"form-group\"&gt;\n                &lt;select id=\"diet_plan2\" class=\"form-control\"&gt;\n                    &lt;option value=''&gt;&lt;strong&gt;Diet Plan&lt;\/strong&gt;&lt;\/option&gt;\n                    &lt;option value=\"Fruits\"&gt;Fruits&lt;\/option&gt;\n                    &lt;option value=\"Veggies\"&gt;Veggies&lt;\/option&gt;\n                &lt;\/select&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"form-group\"&gt;\n                &lt;select id=\"eatables_list2\" class=\"form-control\"&gt;\n\n                &lt;\/select&gt;\n            &lt;\/div&gt;\n\n            &lt;p&gt;\n            &lt;button type=\"submit\" class=\"btn btn-primary btn-lg\"&gt;Submit&lt;\/button&gt;\n            &lt;\/p&gt;\n\n        &lt;\/form&gt;\n    &lt;\/div&gt;\n\n\n    \n&lt;!-- EOF Example 2 --&gt;\n\n&lt;!-- BOF Example 3 --&gt;\n\n&lt;div class=\"col-sm-4\"&gt;\n    &lt;h3&gt;Example 3: When Data in JS Object Format&lt;\/h3&gt;\n        &lt;form role=\"form\" id=\"inquiryForm3\" name=\"inquiryForm3\"&gt;\n\n        \n\n            &lt;div class=\"form-group\"&gt;\n                &lt;select id=\"diet_plan3\" class=\"form-control\"&gt;\n                    &lt;option value=''&gt;&lt;strong&gt;Diet Plan&lt;\/strong&gt;&lt;\/option&gt;\n                    &lt;option value=\"Fruits\"&gt;Fruits&lt;\/option&gt;\n                    &lt;option value=\"Veggies\"&gt;Veggies&lt;\/option&gt;\n                &lt;\/select&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"form-group\"&gt;\n                &lt;select id=\"eatables_list3\" class=\"form-control\"&gt;\n\n                &lt;\/select&gt;\n            &lt;\/div&gt;\n\n            &lt;p&gt;\n            &lt;button type=\"submit\" class=\"btn btn-primary btn-lg\"&gt;Submit&lt;\/button&gt;\n            &lt;\/p&gt;\n\n        &lt;\/form&gt;\n    &lt;\/div&gt;\n\n\n    \n&lt;!-- EOF Example 3 --&gt;\n&lt;\/div&gt; &lt;!-- row div close --&gt;\n&lt;\/div&gt;     &lt;!-- container div close --&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline aligncenter is-style-outline--2\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/samyakonline.biz\/scripts\/dynamic-dropdown-options-list-with-jquery-code-example.php\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Live Demo<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--3\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/samyakonline.biz\/scripts\/demo\/downloads\/dynamic-dropdown-jquery-json-fruit-example.php\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Download Code For Dynamic Dropdown Options List with jQuery $.each Code Example<\/strong><\/a><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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:- Let us put below data structures for more clarity:- Js Code Snippet Example [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1323,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[13],"tags":[],"class_list":["post-1322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-scripts"],"modified_by":"Anil","_links":{"self":[{"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/posts\/1322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/comments?post=1322"}],"version-history":[{"count":0,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/posts\/1322\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/media\/1323"}],"wp:attachment":[{"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/media?parent=1322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/categories?post=1322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/tags?post=1322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}