{"id":51,"date":"2010-10-20T22:06:58","date_gmt":"2010-10-20T14:06:58","guid":{"rendered":"http:\/\/muhamadrais.my\/blog\/?p=51"},"modified":"2010-10-20T22:15:04","modified_gmt":"2010-10-20T14:15:04","slug":"autopopulate-select-dropdown-using-jquery","status":"publish","type":"post","link":"https:\/\/rais.my\/blog\/autopopulate-select-dropdown-using-jquery\/","title":{"rendered":"Autopopulate select dropdown using jquery"},"content":{"rendered":"<p>Setelah tercari-cari baru dapat keyword yang betul. Bukan drilldown tapi keyword yang betul &#8216;autopopulate select dropdown&#8217;.<\/p>\n<p>Apa yang aku cari ialah bagaimana sekiranya ada 2 dropdown menu, di mana senarai dropdown kedua bergantung kepada dropdown pertama.<\/p>\n<p>Sebagai contoh kita pilih dropdown pertama negeri dan dropdown kedua secara otomatik akan senaraikan daerah untuk negeri tersebut.<\/p>\n<p>Contoh klik <a href=\"http:\/\/rais.my\/dev\/jq_autopopulate.php\" target=\"_blank\">di sini<\/a><\/p>\n<p>Contoh berikut terdapat 2 fail iaitu jq_autopopulate.php dan jq_autopopulate2.php<\/p>\n<p>jq_autopopulate2.php<\/p>\n<pre class=\"brush:php\">\r\n$expectedValues = array(\"color\", \"animals\", \"shape\");\r\n\r\n$selectionArr['color'] = array('blue', 'red', 'green');\r\n$selectionArr['animals'] = array('cat', 'rabbit', 'girrafe', 'elephant', 'chicken');\r\n$selectionArr['shape'] = array('circle', 'square', 'triangle');\r\n\r\nif (isset($_POST['data']) && in_array($_POST['data'], $expectedValues)):\r\n$selectedArr = $selectionArr[$_POST['data']];\r\n\r\nforeach($selectedArr as $optionValue):\r\n    echo '<option value=\"'.$optionValue.'\">'.$optionValue.'<\/option>';\r\nendforeach;\r\nendif;\r\n<\/pre>\n<p>jq_autopopulate.php<br \/>\njquery ditempatkan di HEAD<\/p>\n<pre class=\"brush:php\">\r\n<script type=\"text\/javascript\" src=\"jquery\/jquery-1.4.2.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n    $(\"#selectionresult\").hide();\r\n\r\n    $(\"#selection\").change( function() {\r\n        $(\"#selectionresult\").hide();\r\n        $(\"#result\").html('Retrieving, Please wait...');\r\n        $.ajax({\r\n            type: \"POST\",\r\n            data: \"data=\" + $(this).val(),\r\n            url: \"jq_autopopulate2.php\",\r\n            success: function(msg){\r\n                if (msg != ''){\r\n                    $(\"#selectionresult\").html(msg).show();\r\n                    $(\"#result\").html('');\r\n                }\r\n                else{\r\n                    $(\"#result\").html('<em>No item result<\/em>');\r\n                }\r\n            }\r\n        });\r\n    });\r\n});\r\n<\/script>\r\n<\/pre>\n<p>Kod untuk paparan yang ditempatkan di dalam BODY<\/p>\n<pre class=\"brush:php\">\r\nDropdown No. 1 :\r\n    <select id=\"selection\">\r\n        <option value=\"\">\r\n            - Select Item Here -\r\n        <\/option>\r\n        <option value=\"color\">\r\n            List of Colors\r\n        <\/option>\r\n        <option value=\"shape\">\r\n            List of Shapes\r\n        <\/option>\r\n        <option value=\"animals\">\r\n            List of Animals\r\n        <\/option>\r\n    <\/select>\r\n<br><br>\r\nDropDown No. 2 :\r\n<select id=\"selectionresult\"><\/select>   \r\n<br><br>\r\n<div id=\"result\">&nbsp;<\/div>\r\n<\/pre>\n<p>Selamat Mencuba<br \/>\n<a href=\"http:\/\/rais.my\" target-\"_blank\">rais.my<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setelah tercari-cari baru dapat keyword yang betul. Bukan drilldown tapi keyword yang betul &#8216;autopopulate select dropdown&#8217;. Apa yang aku cari ialah bagaimana sekiranya ada 2 dropdown menu, di mana senarai dropdown kedua bergantung kepada dropdown pertama. Sebagai contoh kita pilih dropdown pertama negeri dan dropdown kedua secara otomatik akan senaraikan daerah untuk negeri tersebut. Contoh [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[21,22,5],"tags":[25,24,23,655,656],"class_list":["post-51","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery","category-programming","tag-autopopulate-select-dropdown","tag-drilldown-menu","tag-dropdown-menu","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":5,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":425,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/posts\/51\/revisions\/425"}],"wp:attachment":[{"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}