Открыть элемент select с помощью jQuery?

Question

Мне было интересно, можно ли каким-либо образом открыть элемент select с помощью jQuery?Либо так, либо запретить его закрытие при выделении элемента.То, что я хочу сделать, это добавить подэлементы в список опций при нажатии конкретных опций.Это должно работать следующим образом:

Выбрать некоторую категорию -> Если какая-либо подкатегория существует, добавить их в исходный выбор (достаточно просто), но это нужно сделать, не закрывая выпадающий список выбора.

Возможно ли это или я должен придумать другой способ сделать это?

Спасибо

Answer 1

Почему вы не используете optgroup?

<select id="food" name="food">
  <optgroup label="Fruits">
    <option value="1">Apples</option>
    <option value="3">Bananas</option>
    <option value="4">Peaches</option>
    <option value="5">...</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="2">Carrots</option>
    <option value="6">Cucumbers</option>
   <option value="7">...</option>
 </optgroup>
 <optgroup label="Baked Goods">
   <option value="8">Apple Pie</option>
   <option value="9">Chocolate Cake</option>
   <option value="10">...</option>
 </optgroup>

Скрипка здесь (чтобы посмотреть, как это выглядит): http://jsfiddle.net/rn39c/

Я думаю, это может быть то, что вы ищете, потому что категории - это просто метка, а подкатегории - это опция (со значением, которое отправляется на сервер)

РЕДАКТИРОВАТЬ - Затем вы можете добавить к смеси w некоторые jQuery (это очень просто, но работает: вы можете попытаться улучшить его):

$('#food option').hide();

$('optgroup').hover(function(){
   $(this).children('option').show();
}, function(){
    $(this).children('option').hide();
});

скрипка здесь: http://jsfiddle.net/rn39c/1/

Answer 2

Я не знаю, как вы можете сделать это с помощью jQuery, однако, настроив список выбора, чтобы разрешить несколько выбранных опций, вы автоматически получите что-то, что соответствует вашим критериям:

<select multiple="multiple">

ОБНОВЛЕНИЕ

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

Вот демо-версия одностороннего изменения: http://jsfiddle.net/bGJAw/

Answer 3

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

Answer 4

Открытие и закрытие элемента select является внутренним действием, которым вы не можете манипулировать через JS.Вы можете использовать тег select с size = 5 и т. Д., Чтобы он был постоянно виден, или, возможно, манипулировать атрибутом размера с помощью JS, когда пользователь выбирает что-то, чтобы он оставался открытым, и позже установить его обратно в 1, когда пользователь завершил работу.взаимодействие.