Блог

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

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

Есть какие-нибудь советы?

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

• Это можно сделать, используя комбинацию html-тегов, точно так же, как плагин treeview из библиотеки JavaScript, такой как jQuery UI. Но вы прокомментировали @Edgar, что для этого нет функции множественного выбора.
• Также решением может быть внедрение плагинов flash или java.

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

Настраиваемое поле выбора

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

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.

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

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

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

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

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

В вашем 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();
});