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