Question

我正在研究MVC。我需要在客户端实现级联下拉列表。挑战是我只想要一个下拉列表而不是2。我有以下顺序的数据。部门＆amp;分部门

饮料
- 纯碱
- 果汁
- 水
糖果
- 缓存
- 薯片
- 巧克力

我想显示一个包含所有部门的下拉列表，并在左侧显示一个加号。因此，最初下拉列表将显示以下

（+）饮料
（+）糖果

然后，如果用户点击饮料。下拉列表将显示如下

（ - ）饮料
- 果汁
- 纯碱
- 水
（+）糖果

有没有人知道如何在客户端实现这一目标？由第三方开源控件或完全由JQuery控制。

Answer 1

检查这可能是您在寻找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>

在下拉列表中分组

1 个答案: