Clever Geek Handbook

Population Drop down based on Javascript selection

I have two runs. First, I am given the names of the employees in the second designation. I want us to say that we select First Employee, which is PM and TL, and then the second snapshot should only show PM TM, and when we select PM from the second, we only show those employees who are PM first. I also want to be able to select multi from the first dropdown

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

Here is a Fiddle demo

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

+3


source to share


2 answers


You can try somthing like in this example

a more structured way to do these actions


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

0


source


Dirty and untested. But. despite probable typos, should work:



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


source






More articles:


All Articles