如何在引导程序中启用搜索框上的下拉菜单

Question

我正在设计 searchBox，它在右侧有一个选择（下拉菜单），但是当我按下下拉菜单时没有任何反应意味着我没有看到下拉列表项，我不知道为什么不听 onclick。请帮助我。

我想做这样的事情，但组合框不起作用：

我的代码：

    <html>
     <head>
      <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../css/bootstrap.css">
     <link rel="stylesheet" href="../css/main.css">
     <link rel="stylesheet" href="../css/bootstrap.min.css">
    </head>
    <body>
     <div class="container">
      <div class="row">
     <div class="col-lg-6">
     <div class="input-group">
   <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-      toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span    class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
    </div><!-- /btn-group -->
    <input type="text" class="form-control" aria-label="...">
  </div><!-- /input-group -->
 </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-   toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span     class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
     </ul>
    </div>
    </div>
  </div>
</div>
</div>
 <script type="text/javascript" src="../js/bootstrap.min.js"></script>
 <script type="text/javascript" src="../js/bootstrap.js"></script>
 </body>
   </html>

Answer 1

你好，你一开始并没有通过写来识别班级

 <button type="button" class="btn btn-default ></button>

首先参考类名，它会像这样工作

 <button class="btn btn-default type="button"></button>

使用此下拉代码

  <div class="dropdown">
  <button class="btn btn btn-default dropdown-toggle" type="button" data- 
  toggle="dropdown">Action
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
  <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 </ul>
 </div>

对于整个作品的详细信息，请检查下面的小提琴我更新了你的作品

DropDown 小提琴演示

Answer 2

我无法清楚地理解你的问题，但据我了解如果你想制作下拉列表，你应该使用

<select class="dropdown-menu">
  <option><a href="#">Action</a></option> 
  <option><a href="#">Another action</a></option> 
  <option><a href="#">Something else here</a></option>
  <option role="separator" class="divider"></option> 
  <option><a href="#">Separated link</a></option>  
</select>

结果将是这样的：

像这样http://www.w3schools.com/TagS/tryit.asp?filename=tryhtml_option_selected

如果您想从数组中选择项目的子集，请使用Filters 像这样https://docs.angularjs.org/api/ng/filter/filter

希望对你有用

如何在引导程序中启用搜索框上的下拉菜单

问题描述投票：0回答：2

2个回答

最新问题

如何在引导程序中启用搜索框上的下拉菜单

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2