Pretend I'm running a machine shop. I have multiple employees in a set of defined job categories. Their job category defines areas of the shop each employee may have access to.

Employees may be assigned to one or two job categories, and some areas are accessible to all job categories.

I want to visualize this using a select box for each job category, and a set of possible access areas which will be highlighted in green if the employee meets the job category requirements.

I stumbled across this solution and it works perfectly when applied to only one job category. However, once I added a second select box and tried to apply the same solution to the second select box, the first dropdown stopped working entirely.

Here's the code I'm working with now:

JSFiddle

HTML:

    <div name="jobs-div" id="jobs-div">
        <p>Assign Jobs:</p>
        <div name="jobs" id="jobs">
            <div name="job1-dropdown" id="job1-dropdown">
                <label for="job1">Job 1:</label>
                <select name="job1" id="job1">
                    <option selected="selected" value="default">None</option>
                    <option value=".mgr">Manager</option>
                    <option value=".sl">Shift Lead</option>
                    <option value=".fd">Front Desk</option>
                    <option value=".wld">Welder</option>
                    <option value=".mac">Machinist</option>
                </select>
            </div>
            <div name="job2-dropdown" id="job2-dropdown">
                <label for="job2">Job 2:</label>
                <select name="job2" id="job2">
                    <option selected="selected" value="default">None</option>
                    <option value=".mgr">Manager</option>
                    <option value=".sl">Shift Lead</option>
                    <option value=".fd">Front Desk</option>
                    <option value=".wld">Welder</option>
                    <option value=".mac">Machinist</option>
                </select>
            </div>
        </div>
    </div>
    <div  name="brk-rm" id="brk-rm">Break Room</div>
    <div  name="first-aid" id="first-aid">First Aid Station</div>
    <div  name="wld-cab" id="wld-cab">Welding Equipment</div>
    <div  name="cash-reg" id="cash-reg">Cash Register</div>
    <div  name="clean" id="clean">Cleaning Supplies</div>
    <div  name="mach-st" id="mach-st">Machine Stations</div>
    <div  name="keys" id="keys">Shop Keys</div>

CSS:

    .all-jobs {
        background-color: lightgreen;
        color: black;
    }

    .access-enabled {
        background-color: lightgreen;
        color: black;
    }

JS:

    $("select[name='job1']").change(function() {
        select_changed();
    });

    function select_changed() {
        jQuery("div[class*='access']").each(function() {
            jQuery(this).removeClass('access-enabled');
            console.log(this);
        });
        jQuery("select[name='job1']").each(function() {
            var selected = jQuery(this).val().split(' ');
            $.each(selected, function(index, value) {
                jQuery(value).addClass('access-enabled');
            });
            console.log(selected);
        });
    }
        
    $("select[name='job2']").change(function() {
        select_changed();
    });

    function select_changed() {
        jQuery("div[class*='access']").each(function() {
            jQuery(this).removeClass('access-enabled');
            console.log(this);
        });
        jQuery("select[name='job2']").each(function() {
            var selected = jQuery(this).val().split(' ');
            $.each(selected, function(index, value) {
                jQuery(value).addClass('access-enabled');
            });
            console.log(selected);
        });
    }

CodePudding user response：

You defined function select_changed() { ... } twice, which is not allowed.

Change the second assignment to

    $("select[name='job2']").change(function() {
        select_changed2();
    });

    function select_changed2() { ... }

Include jQuery in the Fiddle and it will run.