<select id="typeselect" name="value" onchange="OnChangeSelect()" >
<option value="1">General</option><br />
<option value="2">Featured</option><br />
</select>
<div id="formbody" class="col-md-12">
<div style="display:none" id="featured-div" disabled>
<?php get_template_part("publish_game_fe") ?>
</div>
<div style="display:block" id="general-div">
<?php get_template_part("publish_game_nr") ?>
</div>
</div>
Depending on the selected option from the dropdown menu, either the "featured-div" or "general-div" will be displayed.
After trying a script as shown below:
function OnChangeSelect()
{
var e=document.getElementById("typeselect");
var val = e.value;
if(val==1){
document.getElementById("general-div").style.display="block";
// document.getElementById("general-div").style.zIndex = 2;
document.getElementById("featured-div").style.display="none";
//document.getElementById("featured-div").style.zIndex = 1;
}
else{
document.getElementById("general-div").style.display="none";
// document.getElementById("general-div").style.zIndex = 1;
document.getElementById("featured-div").style.display="block";
// document.getElementById("featured-div").style.zIndex = 2;
}
}
The form layout includes image buttons and looks like this:
https://i.sstatic.net/SUt1t.png https://i.sstatic.net/9VxzJ.png
When clicking on the select image button of "general-div", it does not respond. However, clicking on the select image button in "featured-div" opens the explorer twice. If one of these forms is excluded, the other works properly. It seems that hiding the div using style.display only makes it invisible, while featured-div still overlaps general-div. What is the correct approach to resolve this issue?