Causing Form To Submit OnChange
<select name="MySelectBox" onchange="this.form.submit()">
Call function when selection changed
<select id="MySelectBox" onchange="MySelectBoxChanged()">
<option value="0">ABC</option>
<option value="1">DEF</option>
<option value="3">HIJ</option>
</select>
<script>
function MySelectBoxChanged() {
console.log(document.getElementById('MySelectBox').value);
}
//Call it also when page loads
window.onload = function() {
MySelectBoxChanged();
};
</script>
Which item is selected?
if (document.getElementById('MySelectBoxId').selectedIndex > 0)
{
}
Show / Hide page elements depending on Select box item chosen
PHP
$MySelectBoxDisplayFormatArray_Html = "const MySelectBoxDisplayFormatArray = []; ";
$Index = 0;
foreach ($MyReadReadAllThings as $Result)
{
$MySelectBoxDisplayFormatArray_Html .= "MySelectBoxDisplayFormatArray[$Index]= \"my_dislay_state2\"; ";
$Index++;
}
Javascript
<script>
function PopulateCategoryType() {
var ListCategoryId = parseInt(document.getElementById('SelectCategory').value)
$MySelectBoxDisplayFormatArray_Html
//Default to display all fields
var DisplayState_Name = "block";
var DisplayState_Text = "block";
var DisplayState_Image = "block";
//If we know the display type for this category hide fields not used
if(typeof MySelectBoxDisplayFormatArray[ListCategoryId] !== 'undefined')
{
switch (MySelectBoxDisplayFormatArray[ListCategoryId])
{
case 'my_dislay_state0':
DisplayState_Name = "none";
DisplayState_Text = "none";
DisplayState_Image = "none";
break;
case 'my_dislay_state1':
//DisplayState_Name = "none";
DisplayState_Text = "none";
//DisplayState_Image = "none";
break;
case 'my_dislay_state2':
DisplayState_Name = "none";
//DisplayState_Text = "none";
//DisplayState_Image = "none";
break;
default:
//DisplayState_Name = "none";
//DisplayState_Text = "none";
//DisplayState_Image = "none";
break;
}
}
//Show/hide the fields
document.getElementById("MyPageDivId_Name").style.display = DisplayState_Name;
document.getElementById("MyPageDivId_Text").style.display = DisplayState_Text;
document.getElementById("MyPageDivId_Image").style.display = DisplayState_Image;
}
//Call it also when page loads
window.onload = function() {
PopulateCategoryType();
};
</script>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.