javascript - 多个动态 Javascript 下拉菜单？

Question

我目前在我的表单上附加了一个 2 层 javascript 下拉框，我希望添加另一个 3 层，但与我当前的 javascript 完全分开，不幸的是无法弄清楚（对 javascript 来说很新:( )

到目前为止，我所拥有的一切都有效（甚至不确定在小提琴上选择什么框架才能正确显示哈哈：（尴尬哈哈

任何帮助表示赞赏<3

Answer 1

这可能足以让您了解这个想法。

jsFiddle在这里

我使用 jQuery 来获取各种 DOM 元素的句柄。这是一个相当不错的资源，用于浏览所有 jQuery 选择器、事件、效果、css 等——尽管有源代码。（继续点击下一章）

首先，这是您用于捕获optone选择元素的更改事件的代码，已从内联 javascript 中删除（这绝不是一个好主意）：

$('select[name=optone]').change(function() {
    var selval = $(this).val();
    setOptions(selval);
});

很简单，是吗？

我保留了您的第一个 setOptions 函数，因为它有效。然而，我setOptions2()在 jQuery 中编写了下一个函数，以向您展示所需的输入减少了多少。

要捕获下一个选择元素的更改事件：

$('select[name=opttwo]').change(function() {
    var sel2val = $(this).val();
    alert('You selected: ' + sel2val);
    setOptions2(sel2val);
    $('#selthreeDiv').show();
});

请注意，在我的 jsFiddle中，我添加了一个包含第三个选择控件的隐藏 div，并在第二个选择更改时显示该控件...

希望这会有所帮助。

Answer 2

好的，我做了这样的事情，它对我有用。你的新 JavaScript

 function setOptions2(chosen) {
        var selbox = document.myform.optthree;
        selbox.options.length = 0;
         if (chosen == "1") {
         selbox.options[selbox.options.length] = new Option('Worked', ' ');

        }
        }

然后添加了一些新的html

 <select name="opttwo" size="1" onchange="setOptions2(document.myform.optone.options[document.myform.optone.selectedIndex].value);" >
                <option value="Please Select Prompt Category" selected="selected">Please Select Prompt Category</option>
            </select>
            <select name="optthree" size="1">
                <option value="Please Select Prompt Category" selected="selected">Please Select Prompt Category</option>
            </select>