Question

I’m trying to do the following:

I have an input <input type="text" value="red,yellow,blue" id="colors" />

and a dropdown list

<select name="colors_dropdown" id="colors_dropdown">
   <option value="red">red</option>
   <option value="yellow">yellow</option>
   <option value="blue">blue</option>
</select>

I want to remove the select options that are in the text input. For example if text input value=red,blue the dropdown should have just option yellow.

I was able to make arrays of the comma separated values in the text input and values in dropdown options.

var selected_colors = $('#colors').val().split(","); //array of colors from text input

var all_colors = $.map($("#colors_dropdown")[0].options, function(option)
                 {
                    return option.value; //array of all colors from dropdown
                 });

Based on that, I’m looking for a way to populate the dropdown list with all colors except those in the selected_colors arrays.

Answer 1

var selected_colors = $('#colors').val().split(","); //array of colors from text input
jQuery.each(selected_colors, function() {
    $("#colors_dropdown option:[value='" + this + "']").remove();
    //Or use text attribute:
    //$("#colors_dropdown option:[text='" + this + "']").remove();
});

Working Demo: http://jsfiddle.net/83Vg9/2/