{"id":440,"date":"2021-11-12T21:41:55","date_gmt":"2021-11-12T21:41:55","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/spring-boot\/?p=440"},"modified":"2021-11-12T21:42:56","modified_gmt":"2021-11-12T21:42:56","slug":"filter-dropdownlist-based-on-another-dropdownlist-with-jquery","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/","title":{"rendered":"Filter Dropdownlist Based on Another Dropdownlist with JQuery"},"content":{"rendered":"<p>In this short tutorial, I will show you an easy way to load a second dropdownlist based on selection on another dropdownlist. We would be using example from FleetMs v2.<\/p>\n<p>We&#8217;ll cover:<\/p>\n<ul>\n<li><a href=\"#t1\">The Scenario<\/a><\/li>\n<li><a href=\"#t2\">Step 1 &#8211; Write the GetCountryById Method<\/a><\/li>\n<li><a href=\"#t3\">Step 2 &#8211; Write the JavaScript Code<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t1\">The Scenario<\/strong><\/h4>\n<p>We would like to add a location information. So in the Add Location form, there are two dropdownlists:<\/p>\n<ul>\n<li>the select country dropdown<\/li>\n<li>the select state dropdown<\/li>\n<\/ul>\n<p>We want such that when a country is selected from the from the select country dropdownlist, the state dropdownlist loads the states in the selected country. This is shown below:<\/p>\n<figure id=\"attachment_442\" aria-describedby=\"caption-attachment-442\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/2021\/11\/Filter-Dropdown-List-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-442 size-medium\" src=\"https:\/\/kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/2021\/11\/Filter-Dropdown-List-300x176.jpg\" alt=\"Filter states dropdownlist based on selected country\" width=\"300\" height=\"176\" srcset=\"https:\/\/kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/2021\/11\/Filter-Dropdown-List-300x176.jpg 300w, https:\/\/kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/2021\/11\/Filter-Dropdown-List-1024x600.jpg 1024w, https:\/\/kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/2021\/11\/Filter-Dropdown-List-768x450.jpg 768w, https:\/\/kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/2021\/11\/Filter-Dropdown-List-1536x900.jpg 1536w, https:\/\/kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/2021\/11\/Filter-Dropdown-List-2048x1201.jpg 2048w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-442\" class=\"wp-caption-text\">Filter states dropdownlist based on selected country<\/figcaption><\/figure>\n<p>To achieve this we would take the steps below:<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t2\">Step 1 &#8211; Write the GetCountryById Method<\/strong><\/h4>\n<p>In the CountryController file, you need to write a method that returns a single country as json object. See the function below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #888888;\">\/\/The Get Country By Id<\/span>\r\n<span style=\"color: #555555; font-weight: bold;\">@GetMapping<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"\/parameters\/country\/{id}\"<\/span><span style=\"color: #333333;\">)<\/span>\r\n<span style=\"color: #555555; font-weight: bold;\">@ResponseBody<\/span>\r\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> Country <span style=\"color: #0066bb; font-weight: bold;\">getCountry<\/span><span style=\"color: #333333;\">(<\/span><span style=\"color: #555555; font-weight: bold;\">@PathVariable<\/span> Integer id<span style=\"color: #333333;\">){<\/span>\r\n    <span style=\"color: #008800; font-weight: bold;\">return<\/span> countryService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getById<\/span><span style=\"color: #333333;\">(<\/span>id<span style=\"color: #333333;\">);<\/span>\r\n<span style=\"color: #333333;\">}<\/span>\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t3\">Step 2 &#8211; Write the JavaScript Code<\/strong><\/h4>\n<p>You need to write the code that would handle the change event of the select list of the country. The complete code is given below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">$(<span style=\"background-color: #fff0f0;\">'document'<\/span>).ready(<span style=\"color: #008800; font-weight: bold;\">function<\/span> () { \/\/ Line 1\r\n    $(<span style=\"background-color: #fff0f0;\">'#ddlCountryAdd'<\/span>).on(<span style=\"background-color: #fff0f0;\">'change'<\/span>,<span style=\"color: #008800; font-weight: bold;\">function<\/span> () { \/\/ Line 2\r\n        $(<span style=\"background-color: #fff0f0;\">'#ddlStateAdd'<\/span>).empty().append(<span style=\"background-color: #fff0f0;\">'&lt;option value=\"null\"&gt;-SELECT-&lt;\/option&gt;'<\/span>); \/\/ Line 3\r\n        <span style=\"color: #008800; font-weight: bold;\">var<\/span> countryid <span style=\"color: #333333;\">=<\/span> $(<span style=\"color: #008800; font-weight: bold;\">this<\/span>).val(); \/\/Line 4\r\n        <span style=\"color: #008800; font-weight: bold;\">var<\/span> href <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"http:\/\/localhost:8080\/parameters\/country\/\"<\/span> <span style=\"color: #333333;\">+<\/span> countryid \/\/Line 5\r\n        $.get(href, <span style=\"color: #008800; font-weight: bold;\">function<\/span> (country, status) { \/\/ Line 6\r\n            <span style=\"color: #008800; font-weight: bold;\">var<\/span> states <span style=\"color: #333333;\">=<\/span> country.states; \/\/ Line 7\r\n            <span style=\"color: #008800; font-weight: bold;\">for<\/span> (<span style=\"color: #008800; font-weight: bold;\">var<\/span> i <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0000dd; font-weight: bold;\">0<\/span>; i <span style=\"color: #333333;\">&lt;=<\/span> states.length<span style=\"color: #333333;\">-<\/span><span style=\"color: #0000dd; font-weight: bold;\">1<\/span>; i<span style=\"color: #333333;\">++<\/span>) { \/\/ Line 8\r\n                $(<span style=\"background-color: #fff0f0;\">'#ddlStateAdd'<\/span>).append(<span style=\"background-color: #fff0f0;\">'&lt;option value=\"'<\/span> <span style=\"color: #333333;\">+<\/span> states[i].id <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">'\"&gt;'<\/span> <span style=\"color: #333333;\">+<\/span> states[i].name <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">'&lt;\/option&gt;'<\/span>); \/\/ Line 9\r\n            }\r\n        })\r\n    })\r\n})\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Explanation<\/strong><\/p>\n<ul>\n<li>Line 2 &#8211; The change event executes a function when the first select is clicked (ddlCountryAdd)<\/li>\n<li>Line 3 &#8211; Clear existing content of the existing content of the ddlState list<\/li>\n<li>Line 4 &#8211; Retrieve the selected country id<\/li>\n<li>Line 5 &#8211; The url to retrieve a country by id<\/li>\n<li>Line 6 &#8211; Make a get request to the url to retrieve the selected country details<\/li>\n<li>Line 7 &#8211; Get the states attribute of the selected country<\/li>\n<li>Line 8 &#8211; Loop through the list of states<\/li>\n<li>Line 9 &#8211; Set the dropdownlist values and text using the state data<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Another Approach<\/strong><\/p>\n<p>Another option would be to have a method in the countryController to return list of states by country. So I&#8217;ll leave that up to you as a home work.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=FzNqL3dxEwc&amp;list=PL9l1zUfnZkZnfOFgWa4K9lTzhvCkjTQfm\" target=\"_blank\" rel=\"noopener\">Video series on this can be found here.\u00a0<\/a><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>In this short tutorial, I will show you an easy way to load a second dropdownlist based on selection on another dropdownlist. We would be &hellip; <!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[53,16,54],"class_list":["post-440","post","type-post","status-publish","format-standard","hentry","category-spring-boot-tutorials","tag-filter-dropdownlist","tag-jquery","tag-load-dropdownlist-by-another-dropdownlist"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/comments?post=440"}],"version-history":[{"count":3,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/440\/revisions"}],"predecessor-version":[{"id":444,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/440\/revisions\/444"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/media?parent=440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/categories?post=440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/tags?post=440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}