{"id":3805,"date":"2021-08-05T14:22:50","date_gmt":"2021-08-05T13:22:50","guid":{"rendered":"https:\/\/ibex.tech\/javascript\/?p=3805"},"modified":"2024-03-26T16:20:08","modified_gmt":"2024-03-26T16:20:08","slug":"select-box-2","status":"publish","type":"post","link":"https:\/\/ibex.tech\/javascript\/forms-javascript\/select-box-2","title":{"rendered":"Select Box"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Causing Form To Submit OnChange<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;select name=\"MySelectBox\" onchange=\"this.form.submit()\"><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Call function when selection changed<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;select id=\"MySelectBox\" onchange=\"MySelectBoxChanged()\"&gt;\n  &lt;option value=\"0\"&gt;ABC&lt;\/option&gt;\n  &lt;option value=\"1\"&gt;DEF&lt;\/option&gt;\n  &lt;option value=\"3\"&gt;HIJ&lt;\/option&gt;\n&lt;\/select&gt;\n\n\n&lt;script&gt;\n  function MySelectBoxChanged() {\n    console.log(document.getElementById('MySelectBox').value);\n  }\n\n  \/\/Call it also when page loads\n  window.onload = function() {\n    MySelectBoxChanged();\n  };\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Which item is selected?<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>if (document.getElementById('MySelectBoxId').selectedIndex &gt; 0)\n{\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Show \/ Hide page elements depending on Select box item chosen<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">PHP<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>  $MySelectBoxDisplayFormatArray_Html = \"const MySelectBoxDisplayFormatArray = &#91;]; \";\n  \n  $Index = 0;\n  foreach ($MyReadReadAllThings as $Result)\n  {\n    $MySelectBoxDisplayFormatArray_Html .= \"MySelectBoxDisplayFormatArray&#91;$Index]= \\\"my_dislay_state2\\\"; \";\n    $Index++;\n  }<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">Javascript<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n  function PopulateCategoryType() {\n    var ListCategoryId = parseInt(document.getElementById('SelectCategory').value)\n    $MySelectBoxDisplayFormatArray_Html\n\n\n    \/\/Default to display all fields\n    var DisplayState_Name = \"block\";\n    var DisplayState_Text = \"block\";\n    var DisplayState_Image = \"block\";\n\n    \/\/If we know the display type for this category hide fields not used\n    if(typeof MySelectBoxDisplayFormatArray&#91;ListCategoryId] !== 'undefined')\n    {\n      switch (MySelectBoxDisplayFormatArray&#91;ListCategoryId])\n      {\n        case 'my_dislay_state0':\n          DisplayState_Name = \"none\";\n          DisplayState_Text = \"none\";\n          DisplayState_Image = \"none\";\n          break;\n\n        case 'my_dislay_state1':\n          \/\/DisplayState_Name = \"none\";\n          DisplayState_Text = \"none\";\n          \/\/DisplayState_Image = \"none\";\n          break;\n\n        case 'my_dislay_state2':\n          DisplayState_Name = \"none\";\n          \/\/DisplayState_Text = \"none\";\n          \/\/DisplayState_Image = \"none\";\n          break;\n\n        default:\n          \/\/DisplayState_Name = \"none\";\n          \/\/DisplayState_Text = \"none\";\n          \/\/DisplayState_Image = \"none\";\n          break;\n      }\n    }\n\n    \/\/Show\/hide the fields\n    document.getElementById(\"MyPageDivId_Name\").style.display = DisplayState_Name;\n    document.getElementById(\"MyPageDivId_Text\").style.display = DisplayState_Text;\n    document.getElementById(\"MyPageDivId_Image\").style.display = DisplayState_Image;\n\n  }\n  \/\/Call it also when page loads\n  window.onload = function() {\n    PopulateCategoryType();\n  };\n&lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Causing Form To Submit OnChange Call function when selection changed Which item is selected? Show \/ Hide page elements depending on Select box item chosen PHP Javascript<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-3805","post","type-post","status-publish","format-standard","hentry","category-forms-javascript"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/3805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=3805"}],"version-history":[{"count":6,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/3805\/revisions"}],"predecessor-version":[{"id":4296,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/3805\/revisions\/4296"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=3805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=3805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=3805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}