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

  • 2016-11-15
  • 944
  • 3
  • 项目名称: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’]);

感谢打赏!
微信
支付宝

评论

  • 头像
    Kilion回复

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

  • 头像
    1779410686回复

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

    • coderstory
      coderstory回复

      主题自带的