{"id":3868,"date":"2013-05-19T19:05:17","date_gmt":"2013-05-19T19:05:17","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3868"},"modified":"2013-05-19T19:05:17","modified_gmt":"2013-05-19T19:05:17","slug":"jquery-change-select-list-options","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-change-select-list-options\/","title":{"rendered":"jQuery Change Select Options Examples"},"content":{"rendered":"<p>Form element manipulation using jQuery can be of immense help when working with forms. As such, it is desirable to know if the options of a select dropdown list can be changed or not. Well, the answer is yes! We can dynamically change the options of a select dropdown. We can remove existing options (if any) and then add new options dynamically. So this article covers the simple ways in which we can <em><strong>change or refresh the options of a select list using jQuery<\/strong><\/em>.<\/p>\n<p><!--more--><\/p>\n<h2>How To Change Select Options Using\u00a0jQuery<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3868\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Let&#8217;s assume that we have a select dropdown list that contains the state &#8220;Texas&#8221; as one of \u00a0the values in it. Now we will see different examples that show us how to remove this existing value and add new ones to it.<\/p>\n<h3>Here is the common HTML code for all the following examples:<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;label for=\"states\"&gt;States&lt;\/label&gt;\n&lt;select name=\"states\" id=\"states\"&gt;\n  &lt;option value=\"Texas\"&gt;Texas&lt;\/option&gt;\n&lt;\/select&gt;\n\n&lt;input type=\"submit\" name=\"sbt_change_single\" id=\"sbt_change_single\" value=\"Change options with Single Option\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_change_array\" id=\"sbt_change_array\" value=\"Change options with Array Options\"&gt;<\/pre>\n<h3>Example 1: Remove existing select dropdown list options and add a single new option to it<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function(){\t\n\n\t$('#sbt_change_single').on(\"click\", function(e){\n\n\t\t\/\/Remove all existing options of the dropdown list\n\t\t$(\"#states\").empty();\t\t\t\n\n\t\t\/\/Prepare the new option\n\t\tvar new_option = $('&lt;option&gt;&lt;\/option&gt;').attr(\"value\", \"AL\").text(\"Alabama\");\n\n\t\t\/\/Add the new option to the recently cleared select dropdown\n\t\t$(\"#states\").append(new_option);\n\n\t\te.preventDefault();\n\n\t});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<p>In the above example, when the first button is clicked, we can see that the exiting option is removed completely and the new option is added. This method is\u00a0desirable\u00a0when you wish to add only one new option. If you want to add multiple options, then take a look at the example below.<\/p>\n<h3>Example 2: Remove existing select dropdown list options and add multiple new options to it from an array<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function(){\t\n\n\t$('#sbt_change_array').on(\"click\", function(e){\n\n\t\t\/\/Remove all existing options of the dropdown list\n\t\t$(\"#states\").empty();\t\t\t\n\n\t\t\/\/Prepare the multiple new options\n\t\tvar new_states = {\"Illinois\": \"IL\",\n\t\t\t\t\t\t  \"California\": \"CA\",\n\t\t\t\t\t\t  \"New Jersey\": \"NJ\"\n\t\t\t\t\t\t};\n\n\t\t\/\/Add all options to the recently cleared select dropdown\n\t\t$.each(new_states, function(key, value) {\n\n\t\t  $(\"#states\").append($(\"&lt;option&gt;&lt;\/option&gt;\").attr(\"value\", value).text(key));\n\n\t\t});\t\n\n\t\te.preventDefault();\n\n\t});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<p>In the above example, when the second button is clicked, you can see that all the existing options of the dropdown are removed and new options from the array are added.<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3868\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>Simple, isn&#8217;t it?<\/h5>\n<p>Do you know of any other ways to <em><strong>change options of a select dropdown list using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Form element manipulation using jQuery can be of immense help when working with forms. As such, it is desirable to know if the options of a select dropdown list can be changed or not. Well, the answer is yes! We can dynamically change the options of a select dropdown. We can remove existing options (if [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,43,41],"class_list":["post-3868","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-10o","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=3868"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3868\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=3868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}