根据 Javascript 中的选择填充下拉列表答案

【问题标题】：Populate Drop down based on Selection in Javascript根据 Javascript 中的选择填充下拉列表
【发布时间】：2015-07-26 23:23:40
【问题描述】：

我有两个下拉菜单，首先是员工的姓名，其次是名称。我想假设我们选择了 PM 和 TL 的第一个员工，然后第二个下拉列表应该只显示 PM TM，当我们从第二个中选择 PM 时，它只显示那些是 PM 的员工。我还想要是否可以从第一个下拉菜单中进行多选

 <select>
<!--This is main selectbox.-->
<option value="">Select</option>
<option>John</option>
<option>Brendon</option>
<option>Davin</option>
<option>Bobby</option>
</select>
<select class="sub">
<!--another selectbox for option one.-->
<option>TL</option>
<option>PM</option>
</select>
<select class="sub">
<!--another selectbox for option two.-->
<option>PM</option>
<option>TL</option>
</select>
<select class="sub">
<!--another selectbox for option three.-->
<option>Developer</option>

 </select>
<select class="sub">
<!--another selectbox for option four.-->
<option>Developer</option>

 </select>

这里是小提琴演示

http://jsfiddle.net/7CmYj/39/

【问题讨论】：

我建议你对第一个选择的选项使用 css 类来指定第二个选择的可选选项。然后，当您从一个或其他选择中选择任何一个时，使用 jquery 隐藏不匹配的选项将非常容易。
要想能在select中选择多个选项，唯一的办法就是给它加上'multiple'属性。但随后它将显示为选择列表，而不是下拉列表。如果多选不是通常的用例，您可能希望在发生某些事情（如 ctrl+单击选择）时从 javascript 添加/删除此属性。
@bitifet 你能帮帮我如何处理 css 或者请解释一下 mor

标签： javascript html

【解决方案1】：

你可以试试这个例子

a more structured way to do these actions

http://jsfiddle.net/7CmYj/92

【讨论】：

这只是附加列表。如果任何机构是开发人员，它只显示开发人员列表附加首先选择的内容
实际上我复制粘贴了旧网址。我的错，这里是链接jsfiddle.net/7CmYj/93

【解决方案2】：

肮脏且未经测试。但。尽管可能存在拼写错误，但应该可以：

<select id="employee">
    <option value="">Select</option>
    <option class="tl">John</option>
    <option class="pm">Brendon</option>
    <option class="tl pm">Davin</option>
    <option class="pm dev">Bobby</option>
</select>

<select id="designation">
    <option value="">Select</option>
    <option value="tl">TL</option>
    <option value="pm">PM</option>
    <option value="dev">Developer</option>
</select>

<script>
    $(function automate(){
            var empl = $("select#employee");
            var emplOpts = $("option", empl);
            var des = $("select#designation");
            var desOpts = $("option", des);

            empl.on("change", function(){
                var me = $(this);
                desOpts.each(function(){
                    var currOpt = $(this);
                    if(me.hasClass(currOpt.attr("value"))) {
                        currOpt.show();
                    } else {
                        currOpt.hide();
                    };  
                });
            });

            des.on("change", function(){
                var v = des.val();
                if (! v.length) {
                    emplOpts.show();
                } else {
                    emplOpts.each(function(){
                        var me=$(this);
                        if (me.hasClass(v)) {
                            me.show();
                        } else {
                            me.hide();
                        };  
                    }); 
                };  
            }); 

    });     
</script>

【讨论】：