Группировка в выпадающем списке

Я работаю над MVC. Мне нужно создать каскадный выпадающий список на стороне клиента. Задача состоит в том, что я просто хочу иметь один раскрывающийся список вместо 2. У меня есть данные в следующем порядке. Отдел & суб отделГруппировка в выпадающем списке

Напитки
- Сода
- Соки
- Вода
Кондитерская
- Печенье
- чипсов
- Конфеты

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

(+) Напитки
(+) Кондитерские

Затем, если пользователь нажмет на напитки. Выпадающий список покажет, как это

(-) Напитки
- Соки
- Сода
- воды
(+) Кондитерская

знает любой один как добиться этого на стороне клиента? Либо сторонние средства с открытым исходным кодом, либо полностью JQuery.

источник

2015-03-20 Developer

ответ @Developer –

Проверить это Может быть, вы ищете для этой проверки Demo Here

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 


    <div class="row"> 

    <div class="col-md-3"> 
     <ul class="nav nav-pills nav-stacked"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Submenu 1-1</a></li> 
      <li><a href="#">Submenu 1-2</a></li> 
      <li><a href="#">Submenu 1-3</a></li>       
      </ul> 
     </li> 
     <li><a href="#">Menu 2</a></li> 
     <li><a href="#">Menu 3</a></li> 
     </ul> 
    </div> 
    <div class="clearfix visible-lg"></div> 
    </div> 
</div> 

</body> 
</html>

источник

2015-03-20 07:21:54

Это не выпадающий список. Мне нужен выпадающий список, а расширение должно быть в том же выпадающем списке – Developer

с любым предложением? – Developer

Группировка в выпадающем списке

ответ

Смежные вопросы