Есть ли способ, которым я могу скрыть значение из выпадающего списка select на основе значения в jQuery?

#jquery

Вопрос:

Кто-нибудь знает, как я могу скрыть значение из выпадающего списка с помощью jQuery?

Пример:

Если у меня есть выпадающий список следующим образом:

 <select name="Test" id="Test">
    <option value=""></option>
    <option value="1">Test1</option>
    <option value="2">Test2</option>
    <option value="3">Test3</option>
    <option value="4">Test4</option>
    <option value="5">Test5</option>
    <option value="6">Test6</option>
</select>

Как я могу скрыть значение списка, если значение равно 2, 3, 4 в jQuery? Таким образом, результат будет таким, как показано ниже

 <select name="Test" id="Test">
    <option value=""></option>
    <option value="1">Test1</option>
    <option value="5">Test5</option>
    <option value="6">Test6</option>
</select>

Ответ №1:

Предполагая, что вы не хотите от них избавляться, лучшее, что вы можете сделать, это отключить их. Я бы предположил, что на основе того же значения, которое могло бы их скрыть, изменение этого же значения потенциально может привести к их повторному появлению. Если это так, вы бы отключили / включили их.

 $('#Test').find('options[value=2], options[value=3]').attr('disabled', 'disabled');

Если вы хотите их удалить…

 $('#Test').find('options[value=2], options[value=3').remove();

Ответ №2:

Я не думаю, что вы можете скрыть эти элементы, но вы можете их удалить:

 $('#Test').find('option[value=2], option[value=3], option[value=4]').remove();

1. как насчет $('#Test').find('options[value=2], options[value=3],options[value=4]').hide();

2. @diEcho: Это ничего не дает (в WebKit или Opera, работает в Firefox4, не удосужился проверить IE), даже после исправления опечатки «параметры -> option». jsfiddle.net/ambiguous/7dWVL

3. @diEcho .hide() Я тоже пробую это, но оно не работает со старым браузером, особенно с IE8 и ниже. Если более старый браузер может это реализовать, это может быть самым близким ответом.

4. Было бы неплохо, если бы на <option> элементы обращали внимание display:none , но они этого не делают в Chrome, Safari и Opera, хотя они есть в Firefox, я все еще не знаю об IE, я не запустил свои лаборатории тестирования браузера (т. Е. Не вытащил компьютеры с Windows из своего шкафа). Я не знаю, что говорят стандарты о display:none on <option> , поэтому я не могу сказать, кто прав, не то чтобы «право» имело такое большое значение, когда сталкиваешься с реальностью, конечно.

Ответ №3:

 function filter_select( dom, filter ){
  var cache = $(dom).children('option').clone();
  $(dom).children('option').each( function(){
    var $this = $(this);
    ( filter.indexOf( Number( $this.val() ) ) > -1 ) amp;amp; $this.remove();
  });
  return function undo(){
    console.log('reattaching original options');
    $(dom).empty().append(cache);
  };
}

использование :

 $(function(){
  var u = filter_select('#Test', [2,3,4]);
  // now you can call u() to undo the filter, if you want.
})