下拉選項隱藏使用javascript

Question

我有兩個下拉菜單，我希望第二個下拉菜單中的選項隱藏，這取決於在第一個下拉菜單中選擇了哪個選項。我在谷歌找到了一些這樣的例子，但問題是，因爲我的代碼太深，我不想冒險創建新的函數和從頭開始使用jquery等。所以我想知道是否有人可以通過創建下面這個例子來實現我的代碼：

如果optionDrop（Drop Down 1）value =「ABC」，那麼numberDrop（Drop向下2）選項將顯示「」，「1」，「2」和「3」，但隱藏「4」。

下面是JavaScript代碼是有關這個問題（還有更多的這種代碼，但並不需要證明它這個問題）：

function getDropDown() { 
     var optionDrop = document.getElementsByName("optionDrop"); 
     var numberDrop = document.getElementsByName("numberDrop"); 

    if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){ 
        numberDrop[0].style.display = "block"; 
        na.style.display = "none"; 

    }else if (optionDrop[0].value == "trueorfalse" || optionDrop[0].value == "yesorno"){    
        numberDrop[0].style.display = "none"; 
        na.style.display = "block"; 
    } 
} 

的HTML代碼，顯示下拉菜單：

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" > 
<table id="middleDetails" border="1"> 
<tr> 
<td>Option Type:</td> 
    <td> 
     <select name="optionDrop" onClick="getDropDown()"> 
<option value="">Please Select</option> 
<option value="abc">ABC</option> 
<option value="abcd">ABCD</option> 
<option value="abcde">ABCDE</option> 
<option value="trueorfalse">True or False</option> 
<option value="yesorno">Yes or No</option> 
</select> 
    </td> 
    </tr> 
<tr> 
<td>Number of Answers:</td> 
<td> 
<select name="numberDrop" id="numberDropId" onChange="getButtons()"> 
<option value=""></option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
</td> 
</tr> 
</table> 
</form> 

Answer 1

嗯，我不明白你想解決的一般問題，因爲你似乎要求一組非常具體的邏輯而沒有將其設爲泛型，但這裏有一些代碼應該做你所描述的（如果不是很多）：

function getDropDown() { 
     var optionDrop = document.getElementsByName("optionDrop"); 
     var numberDrop = document.getElementsByName("numberDrop"); 

    if (optionDrop[optionDrop.selectedIndex].value == "abc" || optionDrop[optionDrop.selectedIndex].value == "abcd" || optionDrop[optionDrop.selectedIndex].value == "abcde"){ 
        numberDrop[4].style.display = "block"; //maybe should be display="none"; ? 
        na.style.display = "none"; // what is this "na" reference? 

    }else if (optionDrop[optionDrop.selectedIndex].value == "trueorfalse" || optionDrop[optionDrop.selectedIndex].value == "yesorno"){    
        numberDrop[4].style.display = "none"; //maybe should be display="block";? 
        na.style.display = "block"; // what is this "na" reference? 
} 
} 

舉兩個：

function getDropDown() { 
     var optionDrop = document.getElementById("optionDropId"); 
     var numberDrop = document.getElementById("numberDropId"); 

     if (optionDrop.options[optionDrop.selectedIndex].value == "abc" || optionDrop.options[optionDrop.selectedIndex].value == "abcd" || optionDrop.options[optionDrop.selectedIndex].value == "abcde"){ 

      numberDrop.options[4].disabled = true; //maybe should be display="none"; ? 
        //na.style.display = "none"; // what is this "na" reference? 

    }else if (optionDrop.options[optionDrop.selectedIndex].value == "trueorfalse" || optionDrop.options[optionDrop.selectedIndex].value == "yesorno"){    
        numberDrop.options[4].disabled = false; //maybe should be display="block";? 
        na.style.display = "block"; // what is this "na" reference? 
} 
} 

Answer 2

這些（超級舊）礦的例子可以幫助你：

• http://phrogz.net/tmp/selpopulate.html
• http://phrogz.net/tmp/selpopulate2.html

Answer 3

下面是一個嘗試，首先我將改變第一個下​​拉菜單onclick="getDropDown()"到： onchange="getDropDown(this[this.selectedIndex].value)" 並且相應地：

function getDropDown(forValue) 
{ 
    var numberDrop = document.getElementsByName("numberDrop"); 

    if (forValue !== "trueorfalse" && forValue !== "yesorno") 
    { 
     numberDrop[0].style.display = "block"; 
     na.style.display = "none"; 
    } 
    else 
    {    
     numberDrop[0].style.display = "none"; 
     na.style.display = "block"; 
    } 
} 

如果沒有動態角度向下在第一液滴的值（即他們不會改變運行時間，），代碼假設，如果它不是trueorfalse或yesorno，它是abc或其他...

與第一個變化，即發送值的函數，你通過不必獲取元素，然後找到所選內容來改進您的js。如果你確實需要這個元素，你可以隨時在html元素上發送「this」，然後在你的函數中獲取這個值。

如果上面似乎工作或至少有意義，讓它在這裏被稱爲。如果有更多的它，我已經錯過了，做評論，這樣我可以進一步闡述;）

Answer 4

將元素的ID作爲參數傳遞給HID（）函數.....

function hid(element) 
{ 
    var drop=document.getElementById(element); 
    drop.options[0].style.visibility="hidden"; 
} 

這隱藏第一名的選項

Answer 5

這裏有一個清晰的例子，你可以適應從：

<script type="text/javascript"> 
function getDropDown(sel){ 
    hideAll(); 
    document.getElementById(sel.options[sel.selectedIndex].value).style.display 
    = 'block'; 
} 

function hideAll(){ 
    document.getElementById("vancouver").style.display = 'none'; 
    document.getElementById("singapore").style.display = 'none'; 
    document.getElementById("newyork").style.display = 'none'; 
} 
</script> 

<table id="middleDetails" border="1"> 
    <tr> 
     <td> 
      <select name="optionDrop" onChange="getDropDown(this)"> 
       <option value="">Please Select</option> 
       <option value="vancouver">Vancouver</option> 
       <option value="singapore">Singapore</option> 
       <option value="newyork">New York</option> 
      </select> 
     </td> 
    </tr> 
</table> 

<div id="vancouver" style="display: none;"> 
    Vancouver 
</div> 

<div id="singapore" style="display: none;"> 
    Singapore 
</div> 

<div id="newyork" style="display: none;"> 
    New York 
</div> 

Answer 6

嘗試禁用帶有隱藏屬性該選項。

if (optionDrop[0].options[optionDrop[0].selectedIndex].text != "Abc") { 
    for (var ctr = 0; ctr < optionDrop[0].length; ctr++) 
    { 
     if (optionDrop[0].options[ctr].text == "Abc") 
     { 
      optionDrop[0].options[ctr].hidden = "true"; 
     } 
    } 
} 
else { 
    optionDrop[0].options[optionDrop[0].selectedIndex].hidden = "false"; 
}