Jquery根据文本输入删除选择选项

Question

我正在尝试执行以下操作:

我有一个输入 <input type="text" value="red,yellow,blue" id="colors" />

和下拉列表

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

我想删除文本输入中的选择选项.例如,如果文本输入value=red,blue下拉列表应该只有选项yellow.

我能够在文本输入中创建逗号分隔值的数组,并在下拉选项中创建值.

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
                 });

基于此,我正在寻找一种方法来填充下拉列表中的所有颜色,除了selected_colors数组中的颜色.

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();
});

工作演示:http://jsfiddle.net/83Vg9/2/