bootstrap风格的多选下拉框插件 bootstrap-multiselect

  • 项目名称:bootstrap-multiselect
  • 项目介绍:一款基于bootstrap的多选下拉框插件
  • 项目地址:https://github.com/davidstutz/bootstrap-multiselect

 

1.资源引用

<!-- 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 type="text/javascript" src="js/bootstrap.min.js">

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

 

2.创建一个select

<select id="example-getting-started" multiple="multiple">
<option value="cheese">Cheese<option value="tomatoes">Tomatoes<option value="mozarella">Mozzarella<option value="mushrooms">Mushrooms<option value="pepperoni">Pepperoni<option value="onions">Onions</select>

3.初始化插件


<script type="text/javascript">
$(document).ready(function() {
$('#example-getting-started').multiselect();
});
</script>

3.下拉框选择类型

  • 1.单选下拉框不需要在select上添加multiple 默认即是单选
  • 2.多选下拉框 select上增加multiple="multiple"属性

下拉菜单分组

只需将需要分组的option 使用group包裹即可

<select id="example-multiple-optgroups">
<optgroup label="Group 1" class="group-1">
<option value="1-1">Option 1.1<option value="1-2" selected="selected">Option 1.2<option value="1-3" selected="selected">Option 1.3</optgroup>
<optgroup label="Group 2" class="group-2">
<option value="2-1">Option 2.1<option value="2-2">Option 2.2<option value="2-3">Option 2.3</optgroup>
</select>

插件初始化参数

enableClickableOptGroups: true 选项分组的group可选,选中即选中分组下的所有成员

动态修改选中内容

['1', '2', '4']是个数组 为option的value

$('#example-select').multiselect('select', ['1', '2', '4']);

点赞
  1. Kilion说道:
    Google Chrome Mac OS X 10.13.0

    如果附带上效果图,会不会更好一点?

  2. 1779410686说道:
    WebView Android 7.0

    博主请问你这评论是用的什么插件

    1. coderstory说道:
      Google Chrome Windows 10

      主题自带的

发表评论

电子邮件地址不会被公开。必填项已用 * 标注