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

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>