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

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

2 个答案: