Удалите <option> с помощью .class И когда пользовательский атрибут NOT равен x

Что у меня:

У меня есть элемент select. Некоторые параметры имеют как класс (.filterable_option), так и настраиваемый атрибут (data-clienturn).

Что мне нужно:

В зависимости от события изменения другого элемента мне нужно удалить параметры из элемента select, который:

... классифицируются как .filterable_option.
... имеет значение атрибута data-custom NOT EQUAL для значения предопределенной переменной (var = $some_value).

Мой код:

HTML:

<select name="myselect_a">
    <option selected="selected"></option>
    <option value="Apply filter">Apply filter</option>    
</select>

<select name="myselect_b">
    <option selected="selected"></option>
    <option data-customattribute="58" value="1" class="filterable_option">Dog</option>    
    <option data-customattribute="58" value="2" class="filterable_option">Cat</option>
    <option data-customattribute="60" value="3" class="filterable_option">Parrot</option>
    <option>I have no class or custom attribute.</option>
</select>

JQuery

$('#myselect_a').on('change', function() {
    var $myselect_a_option = $("#myselect_a").val();
    if($myselect_a_option === 'Apply filter'){  
        var $some_value = '58';
        $("select[name=myselect_b] option.filterable_option[data-customattribute!=" + $some_value + "]").remove();
    }
});

JSFiddle:

Для вашего удобства: http://jsfiddle.net/clarusdignus/L82UH/

Моя проблема:

Мой код не удаляет необходимые параметры. Ничего не происходит.

Ответ 1

Вы использовали имя в своем селекторе. Вместо этого используйте идентификатор, как показано ниже.

<select id="myselect_a">
    <option selected="selected"></option>
    <option value="Apply filter">Apply filter</option>    
</select>

http://jsfiddle.net/L82UH/1/

Или, если вы все еще хотите пойти за именем, попробуйте код ниже:

$('select[name="myselect_a"]').on('change', function() {
  //your code 
});

Ответ 2

У вас есть неправильный селектор для выбора, а также исправляется следующий бит: name='myselect_b']

Демо: http://jsfiddle.net/aamir/L82UH/2/

$('select[name="myselect_a"]').on('change', function() {
    var $myselect_a_option = $(this).val();
    if($myselect_a_option === 'Apply filter'){  
        var $some_value = '58';
        $("select[name='myselect_b'] option.filterable_option[data-customattribute!=" + $some_value + "]").remove();
    }
});

Ответ 3

У вас есть атрибут name в вашей разметке:

<select name="myselect_a">

и вы используете селектор id:

$('#myselect_a')

это проблема.