下拉选项以使用javascript隐藏

Question

我有两个下拉菜单,我希望隐藏第二个下拉菜单中的选项,具体取决于在第一个下拉菜单中选择的选项.我在google中找到了一些这样的例子,但问题是因为我的编码太深,我不想冒险创建新函数并从头开始使用jquery等.所以,我想知道是否有人可以通过创建以下内容的一个示例来实现我的代码:

如果optionDrop(Drop Down 1)value ="ABC",则numberDrop(Drop Down 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

这是一次尝试,首先我将第一个下拉列表更改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",然后在函数中获取值.

如果上述似乎有用或至少有意义,那就让它在这里知道.如果我错过了更多,请做评论,以便我可以进一步详细说明;)