Question

我想使用bootstarp select和输入文本框。当我输入文本框时，它应该建议bootstrap select元素的条目。我想使用javascript，jQuery和json。我该怎么做？

Answer 1

我建议你为此目的使用一些插件。看看https://select2.github.io/examples.html

Answer 2

在页面的主题部分包含以下几行并开始编码：

链接：

bootstrap.min.css， jquery.min.js， bootstrap.min.js

Answer 3

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</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.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script language="javascript">
    $(document).ready(function() {
      //Write your jquery code here  
    });
  </script>
</head>

<body>

  <div class="container">
    <h2>Form control: input</h2>
    <p>The form below contains two input elements; one of type text and one of type password:</p>
    <form role="form">
      <div class="form-group">
        <label for="usr">Name:</label>
        <input type="text" class="form-control" id="usr">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd">
      </div>

      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a>
          </li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a>
          </li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a>
          </li>
        </ul>
      </div>
    </form>
  </div>
</body>
</html>

如何在html中链接输入文本框和下拉列表

3 个答案: