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/

Answer 2

這將消除精確匹配的顏色。使用contains可以刪除所有匹配選項。如果文本框只包含e它會刪除黃色，藍色，紅色，綠色的一切......

// make an array 
var selected_colors = $('#colors').val().split(","); 

// iterate each color 
$.each(selected_colors, function(index, color) { 
    // iterate over each option & remove if necessary 
    $('#colors_dropdown option').each(function(){ 
     if (this.value == color) { 
      $("#colors_dropdown option:[value='" + color + "']").remove(); 
     } 
    }) 
}); 

編輯

剛剛意識到，你並不需要使用兩個each()如上圖所示。試試這個 -

// make an array 
var selected_colors = $('#colors').val().split(","); 

// iterate over each color and remove it from the dropdown 
$.each(selected_colors, function(index, color) { 
    $("#colors_dropdown option:[value='" + color + "']").remove(); 
});