{"id":5666,"date":"2016-06-08T08:23:24","date_gmt":"2016-06-08T05:23:24","guid":{"rendered":"http:\/\/www.karadere.com\/blog\/?p=5666"},"modified":"2016-06-08T08:24:00","modified_gmt":"2016-06-08T05:24:00","slug":"jquery-dependent-dropdown-list","status":"publish","type":"post","link":"https:\/\/www.karadere.com\/blog\/jquery-dependent-dropdown-list.html","title":{"rendered":"Jquery Dependent DropDown List"},"content":{"rendered":"<p><strong>jQuery Dependent DropDown List \u2013 Countries and States<script src=\"http:\/\/www.google-analytics.com\/ga.js\" async=\"\" type=\"text\/javascript\"><\/script><script type=\"text\/javascript\">\/\/ <![CDATA[\nvar _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-40067115-1']); _gaq.push(['_setDomainName', 'phppot.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text\/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https:\/\/ssl' : 'http:\/\/www') + '.google-analytics.com\/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();\n\/\/ ]]><\/script><\/strong><\/p>\n<div class=\"content\">\n<div id=\"tutorial-body\">\n<div id=\"tutorial\">\n<pre class=\"prettyprint lang-php prettyprinted\"><span class=\"tag\">&lt;div<\/span> <span class=\"atn\">class<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"frmDronpDown\"<\/span><span class=\"tag\">&gt;<\/span>\r\n\t<span class=\"tag\">&lt;div<\/span> <span class=\"atn\">class<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"row\"<\/span><span class=\"tag\">&gt;<\/span>\r\n\t\t<span class=\"tag\">&lt;label&gt;<\/span><span class=\"pln\">Country:<\/span><span class=\"tag\">&lt;\/label&gt;&lt;br\/&gt;<\/span>\r\n\t\t<span class=\"tag\">&lt;select<\/span> <span class=\"atn\">name<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"country\"<\/span> <span class=\"atn\">id<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"country-list\"<\/span> <span class=\"atn\">class<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"demoInputBox\"<\/span> <span class=\"atn\">onChange<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"<\/span><span class=\"pln\">getState<\/span><span class=\"pun\">(<\/span><span class=\"kwd\">this<\/span><span class=\"pun\">.<\/span><span class=\"pln\">value<\/span><span class=\"pun\">);<\/span><span class=\"atv\">\"<\/span><span class=\"tag\">&gt;<\/span>\r\n\t\t<span class=\"tag\">&lt;option<\/span> <span class=\"atn\">value<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"\"<\/span><span class=\"tag\">&gt;<\/span><span class=\"pln\">Select Country<\/span><span class=\"tag\">&lt;\/option&gt;<\/span>\r\n\t\t<span class=\"pun\">&lt;?<\/span><span class=\"pln\">php\r\n\t\t<\/span><span class=\"kwd\">foreach<\/span><span class=\"pun\">(<\/span><span class=\"pln\">$results <\/span><span class=\"kwd\">as<\/span><span class=\"pln\"> $country<\/span><span class=\"pun\">)<\/span> <span class=\"pun\">{<\/span>\r\n\t\t<span class=\"pun\">?&gt;<\/span><span class=\"pln\">\r\n\t\t&lt;option value=\"<\/span><span class=\"pun\">&lt;?<\/span><span class=\"pln\">php echo $country<\/span><span class=\"pun\">[<\/span><span class=\"str\">\"id\"<\/span><span class=\"pun\">];<\/span> <span class=\"pun\">?&gt;<\/span><span class=\"pln\">\"&gt;<\/span><span class=\"pun\">&lt;?<\/span><span class=\"pln\">php echo $country<\/span><span class=\"pun\">[<\/span><span class=\"str\">\"name\"<\/span><span class=\"pun\">];<\/span> <span class=\"pun\">?&gt;<\/span><span class=\"tag\">&lt;\/option&gt;<\/span>\r\n\t\t<span class=\"pun\">&lt;?<\/span><span class=\"pln\">php\r\n\t\t<\/span><span class=\"pun\">}<\/span>\r\n\t\t<span class=\"pun\">?&gt;<\/span>\r\n\t\t<span class=\"tag\">&lt;\/select&gt;<\/span>\r\n\t<span class=\"tag\">&lt;\/div&gt;<\/span>\r\n\t<span class=\"tag\">&lt;div<\/span> <span class=\"atn\">class<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"row\"<\/span><span class=\"tag\">&gt;<\/span>\r\n\t\t<span class=\"tag\">&lt;label&gt;<\/span><span class=\"pln\">State:<\/span><span class=\"tag\">&lt;\/label&gt;&lt;br\/&gt;<\/span>\r\n\t\t<span class=\"tag\">&lt;select<\/span> <span class=\"atn\">name<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"state\"<\/span> <span class=\"atn\">id<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"state-list\"<\/span> <span class=\"atn\">class<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"demoInputBox\"<\/span><span class=\"tag\">&gt;<\/span>\r\n\t\t<span class=\"tag\">&lt;option<\/span> <span class=\"atn\">value<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"\"<\/span><span class=\"tag\">&gt;<\/span><span class=\"pln\">Select State<\/span><span class=\"tag\">&lt;\/option&gt;<\/span>\r\n\t\t<span class=\"tag\">&lt;\/select&gt;<\/span>\r\n\t<span class=\"tag\">&lt;\/div&gt;<\/span>\r\n<span class=\"tag\">&lt;\/div&gt;\r\n\r\n\r\n<strong>jQuery Dependent DropDown List \u2013 Countries and States<script src=\"http:\/\/www.google-analytics.com\/ga.js\" async=\"\" type=\"text\/javascript\"><\/script><script type=\"text\/javascript\">\/\/ <![CDATA[\r\nvar _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-40067115-1']); _gaq.push(['_setDomainName', 'phppot.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text\/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https:\/\/ssl' : 'http:\/\/www') + '.google-analytics.com\/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();\r\n\/\/ ]]><\/script><\/strong><\/span><\/pre>\n<div class=\"content\">\n<div id=\"tutorial-body\">\n<div id=\"tutorial\">\n<pre class=\"prettyprint lang-php prettyprinted\"><span class=\"tag\">&lt;script&gt;<\/span>\r\n<span class=\"kwd\">function<\/span><span class=\"pln\"> getState<\/span><span class=\"pun\">(<\/span><span class=\"pln\">val<\/span><span class=\"pun\">)<\/span> <span class=\"pun\">{<\/span><span class=\"pln\">\r\n\t$<\/span><span class=\"pun\">.<\/span><span class=\"pln\">ajax<\/span><span class=\"pun\">({<\/span><span class=\"pln\">\r\n\ttype<\/span><span class=\"pun\">:<\/span> <span class=\"str\">\"POST\"<\/span><span class=\"pun\">,<\/span><span class=\"pln\">\r\n\turl<\/span><span class=\"pun\">:<\/span> <span class=\"str\">\"get_state.php\"<\/span><span class=\"pun\">,<\/span><span class=\"pln\">\r\n\tdata<\/span><span class=\"pun\">:<\/span><span class=\"str\">'country_id='<\/span><span class=\"pun\">+<\/span><span class=\"pln\">val<\/span><span class=\"pun\">,<\/span><span class=\"pln\">\r\n\tsuccess<\/span><span class=\"pun\">:<\/span> <span class=\"kwd\">function<\/span><span class=\"pun\">(<\/span><span class=\"pln\">data<\/span><span class=\"pun\">){<\/span><span class=\"pln\">\r\n\t\t$<\/span><span class=\"pun\">(<\/span><span class=\"str\">\"#state-list\"<\/span><span class=\"pun\">).<\/span><span class=\"pln\">html<\/span><span class=\"pun\">(<\/span><span class=\"pln\">data<\/span><span class=\"pun\">);<\/span>\r\n\t<span class=\"pun\">}<\/span>\r\n\t<span class=\"pun\">});<\/span>\r\n<span class=\"pun\">}<\/span>\r\n<span class=\"tag\">&lt;\/script&gt;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<pre class=\"prettyprint lang-php prettyprinted\"><span class=\"tag\">jQuery Dependent DropDown List \u2013 Countries and States<script src=\"http:\/\/www.google-analytics.com\/ga.js\" async=\"\" type=\"text\/javascript\"><\/script><script type=\"text\/javascript\">\/\/ <![CDATA[\r\nvar _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-40067115-1']); _gaq.push(['_setDomainName', 'phppot.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text\/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https:\/\/ssl' : 'http:\/\/www') + '.google-analytics.com\/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();\r\n\/\/ ]]><\/script><\/span><\/pre>\n<div class=\"content\">\n<div id=\"tutorial-body\">\n<div id=\"tutorial\">\n<h2>Read State Database using PHP<\/h2>\n<p>This PHP code connects database to retrieve states table values based on the country id passed by jQuery AJAX call.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<pre class=\"prettyprint lang-php prettyprinted\"><span class=\"pun\">&lt;?<\/span><span class=\"pln\">php\r\nrequire_once<\/span><span class=\"pun\">(<\/span><span class=\"str\">\"dbcontroller.php\"<\/span><span class=\"pun\">);<\/span><span class=\"pln\">\r\n$db_handle <\/span><span class=\"pun\">=<\/span> <span class=\"kwd\">new<\/span> <span class=\"typ\">DBController<\/span><span class=\"pun\">();<\/span>\r\n<span class=\"kwd\">if<\/span><span class=\"pun\">(!<\/span><span class=\"pln\">empty<\/span><span class=\"pun\">(<\/span><span class=\"pln\">$_POST<\/span><span class=\"pun\">[<\/span><span class=\"str\">\"country_id\"<\/span><span class=\"pun\">]))<\/span> <span class=\"pun\">{<\/span><span class=\"pln\">\r\n\t$query <\/span><span class=\"pun\">=<\/span><span class=\"str\">\"SELECT * FROM states WHERE countryID = '\"<\/span> <span class=\"pun\">.<\/span><span class=\"pln\"> $_POST<\/span><span class=\"pun\">[<\/span><span class=\"str\">\"country_id\"<\/span><span class=\"pun\">]<\/span> <span class=\"pun\">.<\/span> <span class=\"str\">\"'\"<\/span><span class=\"pun\">;<\/span><span class=\"pln\">\r\n\t$results <\/span><span class=\"pun\">=<\/span><span class=\"pln\"> $db_handle<\/span><span class=\"pun\">-&gt;<\/span><span class=\"pln\">runQuery<\/span><span class=\"pun\">(<\/span><span class=\"pln\">$query<\/span><span class=\"pun\">);<\/span>\r\n<span class=\"pun\">?&gt;<\/span>\r\n\t<span class=\"tag\">&lt;option<\/span> <span class=\"atn\">value<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"\"<\/span><span class=\"tag\">&gt;<\/span><span class=\"pln\">Select State<\/span><span class=\"tag\">&lt;\/option&gt;<\/span>\r\n<span class=\"pun\">&lt;?<\/span><span class=\"pln\">php\r\n\t<\/span><span class=\"kwd\">foreach<\/span><span class=\"pun\">(<\/span><span class=\"pln\">$results <\/span><span class=\"kwd\">as<\/span><span class=\"pln\"> $state<\/span><span class=\"pun\">)<\/span> <span class=\"pun\">{<\/span>\r\n<span class=\"pun\">?&gt;<\/span><span class=\"pln\">\r\n\t&lt;option value=\"<\/span><span class=\"pun\">&lt;?<\/span><span class=\"pln\">php echo $state<\/span><span class=\"pun\">[<\/span><span class=\"str\">\"id\"<\/span><span class=\"pun\">];<\/span> <span class=\"pun\">?&gt;<\/span><span class=\"pln\">\"&gt;<\/span><span class=\"pun\">&lt;?<\/span><span class=\"pln\">php echo $state<\/span><span class=\"pun\">[<\/span><span class=\"str\">\"name\"<\/span><span class=\"pun\">];<\/span> <span class=\"pun\">?&gt;<\/span><span class=\"tag\">&lt;\/option&gt;<\/span>\r\n<span class=\"pun\">&lt;?<\/span><span class=\"pln\">php\r\n\t<\/span><span class=\"pun\">}<\/span>\r\n<span class=\"pun\">}<\/span>\r\n<span class=\"pun\">?&gt;<\/span><\/pre>\n<div class=\"content\"><\/div>\n<pre class=\"prettyprint lang-php prettyprinted\"><span class=\"tag\">\u00a0<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>jQuery Dependent DropDown List \u2013 Countries and States &lt;div class=&#8221;frmDronpDown&#8221;&gt; &lt;div class=&#8221;row&#8221;&gt; &lt;label&gt;Country:&lt;\/label&gt;&lt;br\/&gt; &lt;select name=&#8221;country&#8221; id=&#8221;country-list&#8221; class=&#8221;demoInputBox&#8221; onChange=&#8221;getState(this.value);&#8221;&gt; &lt;option value=&#8221;&#8221;&gt;Select Country&lt;\/option&gt; &lt;?php foreach($results as $country) { ?&gt; &lt;option value=&#8221;&lt;?php echo $country[&#8220;id&#8221;]; ?&gt;&#8221;&gt;&lt;?php echo $country[&#8220;name&#8221;]; ?&gt;&lt;\/option&gt; &lt;?php } ?&gt; &lt;\/select&gt; &lt;\/div&gt; &lt;div class=&#8221;row&#8221;&gt; &lt;label&gt;State:&lt;\/label&gt;&lt;br\/&gt; &lt;select name=&#8221;state&#8221; id=&#8221;state-list&#8221; class=&#8221;demoInputBox&#8221;&gt; &lt;option value=&#8221;&#8221;&gt;Select State&lt;\/option&gt; &lt;\/select&gt; &lt;\/div&gt; &lt;\/div&gt; jQuery Dependent [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[2],"tags":[2582,2583,1246,1391],"class_list":["post-5666","post","type-post","status-publish","format-standard","hentry","category-2015-2016","tag-dependent","tag-dropdown","tag-jquery","tag-list","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"aioseo_notices":[],"views":1139,"_links":{"self":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts\/5666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/comments?post=5666"}],"version-history":[{"count":2,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts\/5666\/revisions"}],"predecessor-version":[{"id":5668,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts\/5666\/revisions\/5668"}],"wp:attachment":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/media?parent=5666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/categories?post=5666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/tags?post=5666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}