Как скрыть / показать опцию при клике?

Question

Выбор иногда слишком велик, поэтому я хочу отфильтровать его. У меня будет 3 флажка для выключения / включения некоторых опций, основанных на значениях. Как в примере на jsfiddle

• если значение параметра содержит d скрыть его - в моем примере нам нужно скрыть 2 параметра
• если флажок снят, показывать значение

Может быть сделано в jQuery. Есть идеи как?

Для меня достаточно хорошо, если он работает в Firefox (Chrome тоже хорош, но не обязателен, то же самое для сафари)

Примечание:

Будут установлены 3 флажка для фильтрации значений, которые содержат w, d и, h. Таким образом, скрытие / показ должен работать для всех них.

---

Окончательный код jsfiddle на основе ответа @ShankarSangoli.

Answer 1

Скрытие option в списке выбора поддерживается не во всех браузерах.jQuery даже не может ничего сделать, чтобы он поддерживал все браузеры.Но мы можем отключить эту опцию, используя свойство disabled.

Вот рабочая демонстрация с отключенной опцией при нажатии флажка.

http://jsfiddle.net/ggWJu/8/

Вот рабочая демонстрация для добавления / удаления опции из поля выбора при нажатии флажка,Он добавляет опцию в том же месте, где он был удален.

http://jsfiddle.net/ggWJu/9/

Вот скрипта, которая добавит / удалит все опции, если значение опции содержит значение флажка.

http://jsfiddle.net/ggWJu/10/

Answer 2

Это работает с вашим примером ( jsFiddle ):

$('input:checkbox').click(function() {
    if (this.checked) {
         $('select option[value$=d]').hide(); 
    } else {
         $('select option[value$=d]').show();  
    }
});

Селектор option[value$=d] находит option s со значениями, которые заканчиваются на "d".

Кроме того, я бы дал вашим элементам select и input несколько уникальных идентификаторов, чтобы вы могли определить их как элементы, которыми вы хотите управлять с помощью jQuery - это может повлиять на другие элементы на вашей странице, как есть.

Answer 3

Что вам нужно, так это массив в вашей части js.затем из этого массива вы можете построить элемент select на лету, используя его массив, и вы также можете управлять им на лету.

Answer 4

Является ли этот пример тем, что вы ищете? Смотрите change событие и содержит документацию селектора.