在Bootstrap中选择HTML选项

时间:2014-09-25 11:15:29

标签: jquery html twitter-bootstrap twitter-bootstrap-3

是否有任何示例如何使用Bootstrap for HTML 选择选项,如下例所示?

<form enctype="multipart/form-data" action="/id/" method="get">
<p>Input 
  <select name="TestID">

      <option selected value="1">Test1</option>

      <option selected value="2">Test2</option>

  </select>
  <br />
</p>
  position:<input type="number" name="startpos" value="1000" />
  <input type="submit" name="testsubmit" value="GO!"/>
</form>

1 个答案:

答案 0 :(得分:1)

使用此多选插件:http://davidstutz.github.io/bootstrap-multiselect/

<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

<!-- Build your select: -->
<select class="multiselect" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>

<!-- Initialize the plugin: -->
<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect();
});
</script>