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

【问题标题】：Jquery remove select options based on text inputJquery根据文本输入删除选择选项
【发布时间】：2023-03-04 12:28:03
【问题描述】：

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

我有一个输入<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 数组中的颜色之外的所有颜色填充下拉列表。

【问题讨论】：

标签： javascript jquery arrays forms

【解决方案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/

【讨论】：

我为您的代码鼓掌，先生。它非常紧凑和有效。我不认为它可以被压缩得更多。

【解决方案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();
});

【讨论】：