Hide elements in second list <select>
There are two dropdowns on my page. What I want to do is hide the item in one list if the mirror option is selected in the other list. This pretty much works exactly the way I want it now, except that it hides the items in its list rather than another list.
I tried to switch the variables in the last two if statements, but that just changed the parameters forever. I have no idea what is wrong.
//hidden element in dropdown list 1
var option_to_hide1;
//hidden element in dropdown list 2
var option_to_hide2;
function option_hide(list) {
//grab the team selected by the user in the dropdown list
var team_selected = document.getElementById("team_compare" + list).value;
//if an element is currently hidden, unhide it
if (typeof(option_to_hide1) != "undefined" && option_to_hide1 !== null && list == 2) {
option_to_hide1.style.display = 'block';
} else if (typeof(option_to_hide2) != "undefined" && option_to_hide2 !== null && list == 1) {
option_to_hide2.style.display = 'block';
}
//select the element to hide and then hide it
if (list == 1) {
option_to_hide2 = document.getElementById(team_selected + list);
option_to_hide2.style.display = 'none';
}
if (list == 2) {
option_to_hide1 = document.getElementById(team_selected + list);
option_to_hide1.style.display = 'none';
}
}
<div id="compare_form">
<form action="">
<select name="team_compare1" id="team_compare1">
<option value="" disabled selected>Please select a team...</option>
<option id="DP1" value="DP" onclick="option_hide(1)">DP</option>
<option id="NiP1" value="NiP" onclick="option_hide(1)">NiP</option>
<option id="Portugal1" value="Portugal" onclick="option_hide(1)">Portugal</option>
<option id="Serbia1" value="Serbia" onclick="option_hide(1)">Serbia</option>
<option id="VG1" value="VG" onclick="option_hide(1)">VG</option>
</select>
<select name="team_compare2" id="team_compare2">
<option option value="" disabled selected>Please select a team...</option>
<option id="DP2" value="DP" onclick="option_hide(2)">DP</option>
<option id="NiP2" value="NiP" onclick="option_hide(2)">NiP</option>
<option id="Portugal2" value="Portugal" onclick="option_hide(2)">Portugal</option>
<option id="Serbia2" value="Serbia" onclick="option_hide(2)">Serbia</option>
<option id="VG2" value="VG" onclick="option_hide(2)">VG</option>
</select>
</form>
</div>
Here's a JSFiddle with my code illustrating the problem. https://jsfiddle.net/3dv89anj/
source to share
First you must remove onclick="option_hide(1)"
options in your elements. Onclick
in the option tag doesn't work in other browsers. Onclick
Use onchange
in tag instead select
.
eg.
<select name="team_compare1" id="team_compare1" onchange="option_hide(1)">
The problem is that you are hiding the parameter in the selected combobox because you are targeting the item based on the list you selected instead of the opposite.
This:
if (list == 1) {
// since list = 1, then it will hide the element on list1
option_to_hide2 = document.getElementById(team_selected + list);
option_to_hide2.style.display = 'none';
}
You should change this to:
if (list == 1) {
option_to_hide2 = document.getElementById(team_selected + 2);
option_to_hide2.style.display = 'none';
}
source to share