使用 javascript 隐藏的下拉选项

Drop down options to hide using javascript

提问by BruceyBandit

I have two drop down menus where I want the options in the second drop down menu to be hidden depending of which option is selected in the first drop down menu. I have found some examples in google for this but the problem is that because I am too deep in my coding, I do not want to risk creating new functions and using jquery and etc from scratch. So what I want to know if someone can implement into my code the way this can be achieved by creating one example of this which is below:

我有两个下拉菜单，我希望根据在第一个下拉菜单中选择的选项来隐藏第二个下拉菜单中的选项。我在谷歌中找到了一些例子，但问题是因为我的编码太深了，我不想冒险创建新函数并从头开始使用 jquery 等。所以我想知道是否有人可以通过创建以下示例来实现我的代码：

If optionDrop (Drop Down 1) value = "ABC", then numberDrop (Drop Down 2) options will shows "", "1", "2" and "3" but hides "4".

如果 optionDrop (Drop Down 1) value = "ABC"，那么 numberDrop (Drop Down 2) 选项将显示 "", "1", "2" 和 "3" 但隐藏 "4"。

Below is javascript code which is relevant to this question (there is more to this code but don't need to show it for this question):

以下是与此问题相关的 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 code that shows drop down menus:

显示下拉菜单的 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>

回答by balach

Here's an attempt, firstly I'ld change the first dropdown's onclick="getDropDown()"to: onchange="getDropDown(this[this.selectedIndex].value)"and correspondingly:

这是一个尝试，首先我将第一个下拉列表更改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";
    }
}

If there's no dynamic angle to the values in the first drop down (i.e. they won't be changing on run time,), the code assumes that if it is not trueorfalse or yesorno, it is abc or the others...

如果第一个下拉列表中的值没有动态角度（即它们不会在运行时更改），则代码假定如果它不是 trueorfalse 或 yesorno，则它是 abc 或其他...

with the first change i.e. sending the value to the function, you improve your js by not having to get the element and then finding what was selected. if you do need the element, you could always just send "this" from the html element on change, and then get the value within your function.

通过第一个更改，即将值发送到函数，您可以通过不必获取元素然后查找所选内容来改进您的 js。如果您确实需要该元素，您总是可以在更改时从 html 元素发送“this”，然后在您的函数中获取该值。

if above seems to work or at least make sense, let it be known here. if there's more to it that I have missed, do comment so that I may elaborate further ;)

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

回答by Mathana Prithiviraj

Pass the element id as the parameter to hid() function.....

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

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

This would hide the option in 1st place

这会将选项隐藏在第一名

回答by George

Here's a clean example that you can adapt from:

这是一个干净的示例，您可以借鉴：

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

回答by AnshuM

Try to disable that option with hidden attribute.

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

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

回答by Hasiya

This will work for you.check below code.

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

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

回答by Jake Feasel

Well, I don't really understand the general problem you're trying to solve, since you seem to be asking for a very specific set of logic without making it generic, but here is some code that should do what you describe (if not much else):

好吧，我真的不明白你试图解决的一般问题，因为你似乎要求一组非常具体的逻辑而不是通用的，但这里有一些代码应该做你所描述的（如果不是还有很多）：

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

Take two:

拿两个：

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

回答by Phrogz

These (super old) examples of mine might help you:

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

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

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