{"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:\/\/www.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:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-442 size-medium\" src=\"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-300x176.jpg\" alt=\"Filter states dropdownlist based on selected country\" width=\"300\" height=\"176\" srcset=\"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-300x176.jpg 300w, https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-1024x600.jpg 1024w, https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-768x450.jpg 768w, https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-1536x900.jpg 1536w, https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/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"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Filter Dropdownlist Based on Another Dropdownlist with JQuery - Learn Spring Boot<\/title>\n<meta name=\"description\" content=\"In this lesson, you will learn how to filter a dropdownlist based on a selection of another dropdownlist using JQuery\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Filter Dropdownlist Based on Another Dropdownlist with JQuery - Learn Spring Boot\" \/>\n<meta property=\"og:description\" content=\"In this lesson, you will learn how to filter a dropdownlist based on a selection of another dropdownlist using JQuery\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn Spring Boot\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-12T21:41:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-12T21:42:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-300x176.jpg\" \/>\n<meta name=\"author\" content=\"kindsonthegenius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kindsonthegenius\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/\"},\"author\":{\"name\":\"kindsonthegenius\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#\\\/schema\\\/person\\\/7f8fc5792578d2ff54003fcebe6c46b5\"},\"headline\":\"Filter Dropdownlist Based on Another Dropdownlist with JQuery\",\"datePublished\":\"2021-11-12T21:41:55+00:00\",\"dateModified\":\"2021-11-12T21:42:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/\"},\"wordCount\":331,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2021\\\/11\\\/Filter-Dropdown-List-300x176.jpg\",\"keywords\":[\"Filter Dropdownlist\",\"JQuery\",\"Load Dropdownlist by another dropdownlist\"],\"articleSection\":[\"Spring Boot Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/\",\"name\":\"Filter Dropdownlist Based on Another Dropdownlist with JQuery - Learn Spring Boot\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2021\\\/11\\\/Filter-Dropdown-List-300x176.jpg\",\"datePublished\":\"2021-11-12T21:41:55+00:00\",\"dateModified\":\"2021-11-12T21:42:56+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#\\\/schema\\\/person\\\/7f8fc5792578d2ff54003fcebe6c46b5\"},\"description\":\"In this lesson, you will learn how to filter a dropdownlist based on a selection of another dropdownlist using JQuery\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2021\\\/11\\\/Filter-Dropdown-List-300x176.jpg\",\"contentUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2021\\\/11\\\/Filter-Dropdown-List-300x176.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Filter Dropdownlist Based on Another Dropdownlist with JQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#website\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/\",\"name\":\"Learn Spring Boot\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#\\\/schema\\\/person\\\/7f8fc5792578d2ff54003fcebe6c46b5\",\"name\":\"kindsonthegenius\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"caption\":\"kindsonthegenius\"},\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/author\\\/kindsonthegenius-3\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Filter Dropdownlist Based on Another Dropdownlist with JQuery - Learn Spring Boot","description":"In this lesson, you will learn how to filter a dropdownlist based on a selection of another dropdownlist using JQuery","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Filter Dropdownlist Based on Another Dropdownlist with JQuery - Learn Spring Boot","og_description":"In this lesson, you will learn how to filter a dropdownlist based on a selection of another dropdownlist using JQuery","og_url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/","og_site_name":"Learn Spring Boot","article_published_time":"2021-11-12T21:41:55+00:00","article_modified_time":"2021-11-12T21:42:56+00:00","og_image":[{"url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-300x176.jpg","type":"","width":"","height":""}],"author":"kindsonthegenius","twitter_card":"summary_large_image","twitter_misc":{"Written by":"kindsonthegenius","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/#article","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/"},"author":{"name":"kindsonthegenius","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#\/schema\/person\/7f8fc5792578d2ff54003fcebe6c46b5"},"headline":"Filter Dropdownlist Based on Another Dropdownlist with JQuery","datePublished":"2021-11-12T21:41:55+00:00","dateModified":"2021-11-12T21:42:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/"},"wordCount":331,"commentCount":0,"image":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-300x176.jpg","keywords":["Filter Dropdownlist","JQuery","Load Dropdownlist by another dropdownlist"],"articleSection":["Spring Boot Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/","url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/","name":"Filter Dropdownlist Based on Another Dropdownlist with JQuery - Learn Spring Boot","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-300x176.jpg","datePublished":"2021-11-12T21:41:55+00:00","dateModified":"2021-11-12T21:42:56+00:00","author":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#\/schema\/person\/7f8fc5792578d2ff54003fcebe6c46b5"},"description":"In this lesson, you will learn how to filter a dropdownlist based on a selection of another dropdownlist using JQuery","breadcrumb":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/#primaryimage","url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-300x176.jpg","contentUrl":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2021\/11\/Filter-Dropdown-List-300x176.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/filter-dropdownlist-based-on-another-dropdownlist-with-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kindsonthegenius.com\/spring-boot\/"},{"@type":"ListItem","position":2,"name":"Filter Dropdownlist Based on Another Dropdownlist with JQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#website","url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/","name":"Learn Spring Boot","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kindsonthegenius.com\/spring-boot\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#\/schema\/person\/7f8fc5792578d2ff54003fcebe6c46b5","name":"kindsonthegenius","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","caption":"kindsonthegenius"},"url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/author\/kindsonthegenius-3\/"}]}},"_links":{"self":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/comments?post=440"}],"version-history":[{"count":3,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/440\/revisions"}],"predecessor-version":[{"id":444,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/440\/revisions\/444"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/media?parent=440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/categories?post=440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/tags?post=440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}