Question

我有两个下降首先我得到了员工的名字和第二个名称。我希望我们选择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/

Answer 1

您可以尝试使用此示例中的内容

a more structured way to do these actions

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

Answer 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>

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

2 个答案: