使用 javascript 隐藏的下拉选项答案

【问题标题】：Drop down options to hide using javascript使用 javascript 隐藏的下拉选项
【发布时间】：2011-12-03 16:05:46
【问题描述】：

我有两个下拉菜单，我希望隐藏第二个下拉菜单中的选项，具体取决于在第一个下拉菜单中选择的选项。我在谷歌中找到了一些例子，但问题是因为我的编码太深了，我不想冒险从头开始创建新函数和使用 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>

【问题讨论】：

标签： javascript html drop-down-menu hidden option

【解决方案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”，然后在您的函数中获取该值。

如果上述方法似乎可行或至少有意义，请在此处告知。如果我错过了更多内容，请发表评论，以便我进一步详细说明；）

【讨论】：

设置 display="none" 是否真的为您隐藏了该选项？我不认为这适用于所有浏览器。
@JakeFeasel，是的，这是真的。我只是想简化 JS，请注意我没有更改块内的任何内容。至于在选项标签上不显示，我认为是 webkit 完全忽略了它，所以我建议根据第一个选择删除和重新添加选项。

【解决方案2】：

将元素id作为参数传递给hid()函数.....

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

这会将选项隐藏在第一位

【讨论】：

【解决方案3】：

这是一个干净的示例，您可以从中进行调整：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我的这些（超级旧的）示例可能会对您有所帮助：

【讨论】：

【解决方案6】：

好吧，我不太了解您要解决的一般问题，因为您似乎要求一组非常具体的逻辑而没有使其通用，但这里有一些代码应该符合您的描述（如果不多的话）：

   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?
}
}

【讨论】：

根本不显示下拉菜单

【解决方案7】：

这对你有用。检查下面的代码。

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

【讨论】：