可搜索的下拉列表html

时间:2020-07-22 06:00:02

标签: html ajax

我有此代码可用于html中的可搜索下拉列表。 html可以正常工作,但是无法在下拉列表中搜索。我试图找到错误,但我要出错了。请帮助我更正我的代码。 谢谢。

<html>

<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
</head>

<div class="container">
  <div class="row">
    <h2>Bootstrap-select example</h2>
    <hr />
  </div>
  <select class="selectpicker" data-show-subtext="true" data-live-search="true">
    <option data-subtext="Rep California">Tom Foolery</option>
    <option data-subtext="Sen California">Bill Gordon</option>
    <option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
    <option data-subtext="Rep Alabama">Mario Flores</option>
    <option data-subtext="Rep Alaska">Don Young</option>
    <option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
  </select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

</html>

1 个答案:

答案 0 :(得分:1)

我在项目中使用了此版本的引导程序。试试这个。

<html>

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

</head>

<div class="container">
  <div class="row">
    <h2>Bootstrap-select example</h2>
    <hr />
  </div>
  <select class="selectpicker" data-show-subtext="true" data-live-search="true">
    <option data-subtext="Rep California">Tom Foolery</option>
    <option data-subtext="Sen California">Bill Gordon</option>
    <option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
    <option data-subtext="Rep Alabama">Mario Flores</option>
    <option data-subtext="Rep Alaska">Don Young</option>
    <option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
  </select>
</div>

</html>