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

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

<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

如果您想从阵列中选择项目的子集过滤器 像这样https://docs.angularjs.org/api/ng/filter/filter

我希望有用

Answer 2

您好，您不是通过编写

来首先识别班级

 <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 Fiddle Demo

如何在bootstrap中启用searchbox下拉列表

2 个答案: