Question

I’m trying to re-append a “removed option” to the appropriate select option menu.

I have three select boxes: “Categories”, “Variables”, and “Target”. “Categories” is a chained select, so when the user selects an option from it, the “Variables” select box is populated with options specific to the selected categories option. When the user chooses an option from the “Variables” select box, it’s appended to the “Target” select box. I have a “remove selected” feature so that if a user “removes” a selected element from the “Target” select box, it’s removed from “Target” and put back into the pool of “Variables” options. The problem I’m having is that it appends the option to the “Variables” items indiscriminately. That is, if the selected category is “Age” the “Variables” options all have a class of “age”. But, if the removed option is an “income” item, it will display in the “Age Variables” option list.

Here’s the HTML markup:

<select multiple="" id="categories" name="categories[]">
  <option class="category" value="income">income</option>
  <option class="category" value="gender">gender</option>
  <option class="category" value="age">age</option>
</select>

<select multiple="multiple" id="variables" name="variables[]">
  <option class="income" value="10">$90,000 - $99,999</option>
  <option class="income" value="11">$100,000 - $124,999</option>
  <option class="income" value="12">$125,000 - $149,999</option>
  <option class="income" value="13">Greater than $149,999</option>
  <option class="gender" value="14">Male</option>
  <option class="gender" value="15">Female</option>
  <option class="gender" value="16">Ungendered</option>
  <option class="age" value="17">Ages 18-24</option>
  <option class="age" value="18">Ages 25-34</option>
  <option class="age" value="19">Ages 35-44</option>
</select>

<select height="60" multiple="multiple" id="target" name="target[]">
</select>

And, here’s the js:

/* This determines what options are display in the "Variables" select box */
    var cat = $('#categories');
    var el = $('#variables');

    $('#categories option').click(function() {
        var class = $(this).val();
        $('#variables option').each(function() {
            if($(this).hasClass(class)) {
                $(this).show();
            } else {
               $(this).hide();
            }
        });
    });

/* This adds the option to the target select box if the user clicks "add" */
    $('#add').click(function() {  
        return !$('#variables option:selected').appendTo('#target');  
    });

/* This is the remove function in its current form, but doesn't append correctly */
    $('#remove').click(function() {
                $('#target option:selected').each(function() {
                        var class = $(this).attr('class');

                        if($('#variables option').hasClass(class)) {
                                $(this).appendTo('#variables');
                                sortList('variables');
                        }
                });
    });

Answer 1

You will actually find you are headed down the wrong road as you cannot “hide” option elements consistently across browsers. You actually need to add and remove them to alter the list.

I put together a working version of what you are looking for, and you can view it or edit it on JSBin.

The basic flow is as follows:

1. On page load, grab all the options from #variables and store then in a hash/array for later use.
2. Create a update_variables function that empties the variables list, adds in all the correct ones for the selected category. The important part here, is it checks if target has the item with that value already and will not add it again as it is already added to target.
3. On “Add” just append the selected elements from #variables to #target and deselect them.
4. On “Remove” just remove the selected elements from #target and call update_variables()

Here is a sampling of a few methods. Look at the source on JSBin for all the code needed:

opts ends up looking like this:

var opts = {
    'age':[
       { label: 'Ages 18-24', value: 17 },
       { label: 'Ages 25-34', value: 18 },
       { label: 'Ages 35-44', value: 19 }
    ]
    ....
}

Here is the update_variables function:

function update_variables(){
   var cat = $cats.val(), new_opts = [];
   $vars.empty();

   $.each(opts[cat], function(){
     if( $target.find('[value=' + this.value + ']').length === 0 ){
       new_opts.push(option(this.value, this.label));
     }
   });

   $vars.html(new_opts.join(''));
}

Note: the option() function is a little helper that creates the HTML for an option element.