Populate multiple select based on choices in other multiple select

Question

Okay, I'll do my best to explain this. I have a list of company departments that are shown in a multiple select element. Each employee can be connected to several of these departments. I get this data from our database. When I select one of the departments the list of employees in that department are shown in another multiple select element. When I select more than one department, the employees from those departments should be shown. And that's the issue. I can only get it to work with one of the departments selected.

I want to make sure that all employees from the selected departments are shown in the multiple select element, and also that, if one employee belongs to more than one department, he is only shown one time.

Hopefully someone can point me in the right direction. I've tried to boil my code down, so this is the hardcoded version without getting stuff from the database.

Instead of posting the code here, I've made a jsFiddle

Answer 1

Let's add one more loop and if clause to the code. Additionally, we will use obj.options[k].value instead of obj.value:

for (k = 0; k < obj.options.length; k++) {                   // <-- add here
    if (obj.options[k].selected) {                           // <-- add here
        for (i = 0; i < selOptions.length; i++) {
            if (obj.options[k].value == selOptions[i][0]) {  // <-- change here
                for (j = 1; j < selOptions[i].length; j++) {
                    oSel2.options[oSel2.options.length] = new Option(
                        selOptions[i][j], selOptions[i][j], false, false);
                }
                i = selOptions.length;
            }
        }
    }
}

DEMO: http://jsfiddle.net/Kw5Km/2/