隱藏第二個元素<select>列表

在我的頁面上，有兩個下拉列表。如果在另一個列表中選擇了鏡像選項，我想要做的就是將一個元素隱藏在一個列表中。這幾乎是我現在想要的，除了它將元素隱藏在自己的列表中而不是其他列表中。隱藏第二個元素<select>列表

我嘗試在最後兩個if語句中切換變量，但這只是使選項永遠消失。我不知道什麼是錯的。

//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>

這裏有一個的jsfiddle我的代碼說明問題。 https://jsfiddle.net/3dv89anj/

來源

2015-05-07 tidus22

首先，您必須刪除您的選項元素上的onclick="option_hide(1)"。選項標籤上的Onclick不在其他瀏覽器上的seem to work。而不是onclick使用onchange上select標記。

例如

<select name="team_compare1" id="team_compare1" onchange="option_hide(1)">

的問題是你隱藏的選項上您選擇的下拉列表中，因爲您是根據什麼是你的選擇列表，而不是相反的一個定位的元素。

這一個：

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'; 
}

你要改變，要：

if (list == 1) { 
    option_to_hide2 = document.getElementById(team_selected + 2); 
    option_to_hide2.style.display = 'none'; 
}

Fiddle

來源

2015-05-07 02:21:10

非常感謝您！ – tidus22

@ tidus22很高興幫助！ –

隱藏第二個元素<select>列表

回答

相關問題