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”，然后在你的函数中获取值。

如果上述似乎有效或至少有意义，请在此处告知。如果我错过了更多，请做评论，以便我可以进一步详细说明;）

Answer 2

将元素id作为参数传递给hid（）函数.....

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

这会隐藏第一名的选项

Answer 3

尝试使用隐藏属性禁用该选项。

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

Answer 4

好吧，我真的不明白你试图解决的一般问题，因为你似乎要求一套非常具体的逻辑而不是通用的，但这里有一些代码可以做你所描述的（如果没有其他的话）：

   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 5

我的这些（超级老）例子可能对你有所帮助：

Answer 6

这适用于你。检查代码。

<script type="text/javascript">
    function EnableChargeType()
    {
        var ddlacctype = document.getElementById('<%= ddlAccountType.ClientID%>');
        var ddlchargeType = document.getElementById('<%= ddlChargeType.ClientID %>');
        var selectedItem = ddlacctype.options[ddlacctype.selectedIndex].value;
        if(selectedItem=='Postpaid')
        {
            ddlchargeType.options.namedItem("Tier").hidden = true;
            ddlchargeType.options.namedItem("Wallet").hidden = false;
        }
        else if(selectedItem=='Prepaid')
        {
            ddlchargeType.options.namedItem("Tier").hidden = true;
            ddlchargeType.options.namedItem("Wallet").hidden = false;
        }
    }
</script>

下拉选项以使用javascript隐藏

6 个答案: