我不想使用 javascript 显示的下拉值答案

【问题标题】：Dropdown values I do not want to display using javascript我不想使用 javascript 显示的下拉值
【发布时间】：2011-12-02 19:06:51
【问题描述】：

我有两个下拉菜单。

1st -> 下拉菜单 (name="DropDown1") 有 2 个值，它们是 ABC 和 ABCD
2nd -> 下拉菜单 (name="DropDown2") 有 3 个值，分别是 1、2 和 3。

现在我的问题是，在 Javascript 中，如果用户从 DropDown1 中选择 ABC，那么我怎样才能得到它以便 DropDown2 只显示值 1 和 2 而不是 3，这是因为你不能为 ABC 选择 3 个答案，但如果用户从 DropDown1 中选择 ABCD，则能够在 DropDown2 中显示值 1、2 和 3。

谢谢

【问题讨论】：

标签： javascript drop-down-menu visibility

【解决方案1】：

我会设置一个键/值对对象来保存您的选择可能性。然后绑定到 DropDown1 上的 change 事件，以便在 DropDown2 更改时重写其选项。

你的 javascript 对象看起来像这样......

var DropOne = new Array();

DropOne.ABC = [1, 2];
DropOne.ABCD = [1, 2, 3];

如果您将 jQuery 标记添加到问题中，我很乐意向您展示一些工作代码。不过，我不能用纯粹的 javascript 来做这件事……哎呀 :)

好吧...如果你想要的话，这里有 jQuery...

http://jsfiddle.net/brettzink/pND9u/

【讨论】：

太多的 jQuery 会让你忘记旧的 javascript :) jQuery 版本 +1 ;)
这是真的。我也不为此感到难过。 :) 谢谢。

【解决方案2】：

您必须有两个数组，并且在选择问题时，您必须在答案选择中填充选项，示例代码：

<html>
    <head>
    <title>Question Answer Test</title>
    <script type="text/javascript">
        var dropdown1 = [];
        var dropdown2 = [];

        dropdown1[0] = new Option("1", "1");
        dropdown1[1] = new Option("2", "2");

        dropdown2[0] = new Option("1", "1");
        dropdown2[1] = new Option("2", "2");
        dropdown2[2] = new Option("3", "3");

        function populateAnswer(qusSelectBox, ansSelectBox){
            var tempMenuItem;
            ansSelectBox.options.length = 0;

            switch (qusSelectBox.selectedIndex) {
                case 0:
                    tempMenuItem = dropdown1;
                    break;
                case 1:
                    tempMenuItem = dropdown2;
                    break;
           }

           for (var i = 0; i < tempMenuItem.length; i++) {
                ansSelectBox.options[i] = tempMenuItem[i];
           }
   }

    </script>
    </head>
    <body>
        <form name="Menus">
            <select name="Question" onchange="populateAnswer(this, this.form.Answer);">
                 <option value="ABC">ABC</option>
                 <option value="ABCD">ABCD</option>
            </select> 
            <select name="Answer">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </form>
    </body>
 </html>

【讨论】：