多个动态 JavaScript 下拉列表

Multiple Dynamic Javascript Dropdowns?

本文关键字：下拉列表 JavaScript 动态      更新时间：2023-09-26

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

）

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

任何帮助都值得赞赏<3

这可能足以让你明白这个想法。

js小提琴在这里

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

首先，这是用于捕获optone select元素的更改事件的代码，该事件已从内联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();
});

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

希望这会有所帮助。

好的，

我做了这样的事情，它对我有用。您的新 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>
相关文章：