Расширяемый мультиселект выпадающий список

Question

Как получить раскрывающийся список с множественным выбором [древовидное представление]?

Например, из приведенного ниже снимка экрана, если у меня есть подсписок для животных [Кошка, Корова и т. Д.], Есть ли какой-либо плагин как таковой, который бы показывал знак +, а при нажатии он отображал подсписок в такое же выпадающее меню, как в виде дерева?

Какой совет?

Answer 1

Только один выбранный тег, я знаю, что вы не можете.В вашем случае вам нужно создать настраиваемое поле выбора.

• Это можно сделать, используя комбинацию тегов html, подобно плагину treeview библиотеки JavaScript, например JQuery UI .Но вы прокомментировали @Edgar, что для этого нет мульти-выбора.
• Решением может быть также встраивание Flash или Java-плагинов.

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

Индивидуальное поле выбора

Как создать настраиваемое поле выбора:

1. Создайте div, который будет контейнером списка.

   <div id="treeSelect">

2. Добавьте стиль в div, который будет вести себя как поле выбора.

   #treeSelect{height: 100px;width: 150px;border: 1px solid #000;overflow: auto;}

3. Добавьте содержимое основного списка вместе с подсписком в div.Включите все возможные стили, которые можно использовать для форматирования содержимого, чтобы оно было больше похоже на древовидный список.

   <span class="mainList">All</span>
   <br />
   <span class="expand" onClick="expand('animals', this);">[+]</span><span class="mainList">Animals</span>
   <br />  
   <ul id="animals" class="subList">
       <li><input type="checkbox" name="animals" value="Cat">Cat</li>
       <li><input type="checkbox" name="animals" value="Cow">Cow</li>
       <li><input type="checkbox" name="animals" value="Cat">Dog</li>
   </ul>
   

4. Добавьте скрипт, который будет обрабатывать способ просмотра подсписка.

   функция развернуть (список, просмотр) {

   var listElement = document.getElementById(list);
   var defaultView = '[+]';
   
   if(view.innerHTML == defaultView){
       listElement.style.display = "block";
       view.innerHTML = '[-]'; 
   } else {
       listElement.style.display = "none";
       view.innerHTML = '[+]';
   }
   

   }

Я не могу поставить весь код, поэтому см. jsfiddle для полного кода.

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

Answer 2

Вы можете использовать <optgroup> для каждой основной категории, чьи дочерние элементы по умолчанию скрыты, и при нажатии на ярлык <optgroup> можно просто показать дочерние элементы <option> (s).

Что-то вроде следующего:

В вашем CSS:

#categories optgroup option { display: none; }

В вашем HTML:

<select name="categories" id="categories">
    <optgroup label="+ Animals">
        <option value="bird">Bird</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
    </optgroup>
</select>

В вашем JavaScript (с использованием jQuery):

$('#categories > optgroup').click(function(){
    $(this).children().toggle();
});

Answer 3

Вы можете использовать плагин treeview или плагин jsTree

Надеюсь, это поможет.Приветствия