下拉选项隐藏使用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"; 
}