Question

I have the following two select (multiple lists) which I’m trying to setup as a shuttle by where I provide the user an "Available List" on the left which they can select from, which then gets transported to the right select list, which is my "Assigned List".

The HTML code is as follows:

<select multiple="multiple" name="avail_list" size="7" style="width:250px;" id="AVAILABLE_LIST">
    <option value="A">A1</option>
    <option value="B">B1</option>
    <option value="C">C1</option>
    <option value="D">D1</option>
    <option value="E">E1</option>
    <option value="F">F1</option>
</select>
    
<select multiple="multiple" name="assign_list" size="7" style="width:250px;" id="ASSIGNED_LIST">
    <option value="D">D1</option>
    <option value="E">E1</option>
    <option value="F">F1</option>
</select>

Through the use of jQuery, how could I possibly remove from the AVAILABLE_LIST, the options that have been selected and are now in the ASSIGNED_LIST?

I need to some how perform on the option values only (AVAILABLE_LIST minus ASSIGNED_LIST).

So based on the above, the AVAILABLE_LIST would then look like this:

<select multiple="multiple" name="avail_list" size="7" style="width:250px;" id="AVAILABLE_LIST">
    <option value="A">A1</option>
    <option value="B">B1</option>
    <option value="C">C1</option>
</select>

Just to make myself clear, I already have the above data setup when entering my page, that is, there are already values in the "Assigned List" on the right.

On entry when presenting this page with the two select lists to the user, I want to programmatically perform the minus between the two sets in the background. There is no human interaction required as the selection has already been made.

Is this possible?

Answer 1

Yes you can, look at this fiddle: http://jsfiddle.net/57JUD/5/

Try this code:

$('#ASSIGNED_LIST > option').each(function(index, element){
    var val= $(element).val();
     $('#AVAILABLE_LIST > option[value="'+val+'"]').remove();
});