Question

我目前有一个附加到我的表单的2层javascript下拉框，我希望添加另外3层，但完全分离到我当前的JavaScript，不能不幸地想出来（很新javascript :(）

这里到目前为止，这一切都有效（甚至不确定在小提琴上选择哪个框架才能正确显示lol :(尴尬哈哈

感谢任何帮助＆lt; 3

Answer 1

好的，我做了这样的事，对我有用。你的新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>

Answer 2

这可能是您获得想法的足够代码。

<强> jsFiddle here

我使用jQuery来获取各种DOM元素的句柄。 Here is a quite decent resource用于浏览所有jQuery选择器，事件，效果，css等 - 尽管有源代码。（继续点击下一章）

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

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

很简单，是吗？

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

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

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

注意in my jsFiddle我添加了一个包含第3个选择控件的隐藏div，并在第2个选择被更改时显示该控件...

希望这会有所帮助。

多个动态Javascript下拉菜单？

2 个答案: