下拉多选框bootstrap-multiselect教程

最新推荐文章于 2024-03-21 16:46:29 发布
最新推荐文章于 2024-03-21 16:46:29 发布
阅读量753 收藏
点赞数
分类专栏： HTML 文章标签： html
bootstrap-multiselect:[url]https://github.com/davidstutz/bootstrap-multiselect[/url]
bootstrap-multiselect doc：[url]http://davidstutz.github.io/bootstrap-multiselect/[/url]
项目中要用到下拉多选框，搜了一下，感觉bootstrap-multiselect，不错，今天来简单介绍一下：
测试页面： 
<html lang="en">
<head>
<meta charset="utf-8" />
<!--注意这里jquery的版本和css，js引入的顺序 -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="./jquery/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>

<!-- Include the plugin's CSS and JS: -->
<!-- <script type="text/javascript" src="./dist/js/bootstrap-multiselect.js"></script> -->
<!--无选择提示为中文,只是部分中文 -->
<script type="text/javascript" src="./dist/js/bootstrap-multiselect_cn.js"></script>
<link rel="stylesheet" href="./dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
    console.log("start");
    $(document).ready(function() {
        $('#example-multiple').multiselect();
		$('#example-radio').multiselect();
		$('#example-multiple-optgroups').multiselect();
		$('#example-radio-optgroups').multiselect();
		/*
		*分组可选，可折叠，全选时不显示，所有option的数量
		*/
		$('#example-enableClickableOptGroups').multiselect({
                                enableClickableOptGroups: true,
				selectAllNumber: false
        });
		/*
		*分组可选，可折叠，可全选，右侧显示下拉选项，
		*触发选择事件，可搜索，可展示已选择option的数量（numberDisplayed）
		*/
		$('#example-all').multiselect({
				enableClickableOptGroups: true,
				enableCollapsibleOptGroups: true,
				includeSelectAllOption: true,
				buttonWidth: '400px',
				dropRight: true,
				maxHeight: 200,
				onChange: function(option, checked) {
				alert($(option).val());
                                /*if(条件) {
			          this.clearSelection();//清除所有选择及显示
				 }*/
				},
				nonSelectedText: '请选择',
				numberDisplayed: 10,
				enableFiltering: true,
				allSelectedText:'全部',
        });

    });
</script>
</head>
<body style="margin-left:10;">
 1.多选下拉框：

	<select id="example-multiple" 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>
	<BR/>
2.单选下拉框：

	<select id="example-radio">
		<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>
	<BR/>
从上面两个来看，能不能多选，主要是multiple="multiple"属性配置...

3.多选分组下拉框：

	<select id="example-multiple-optgroups" multiple="multiple">
		<optgroup label="Group 1" class="group-1">
			<option value="1-1">Option 1.1</option>
			<option value="1-2" selected="selected">Option 1.2</option>
			<option value="1-3" selected="selected">Option 1.3</option>
		</optgroup>
		<optgroup label="Group 2" class="group-2">
			<option value="2-1">Option 2.1</option>
			<option value="2-2">Option 2.2</option>
			<option value="2-3">Option 2.3</option>
		</optgroup>
	</select>
	<BR/>
4.单选分组下拉框：

	<select id="example-radio-optgroups">
		<optgroup label="Group 1" class="group-1">
			<option value="1-1">Option 1.1</option>
			<option value="1-2" selected="selected">Option 1.2</option>
			<option value="1-3" selected="selected">Option 1.3</option>
		</optgroup>
		<optgroup label="Group 2" class="group-2">
			<option value="2-1">Option 2.1</option>
			<option value="2-2">Option 2.2</option>
			<option value="2-3">Option 2.3</option>
		</optgroup>
    </select>
	<BR/>
5.分组多选下拉框：

	<select id="example-enableClickableOptGroups" multiple="multiple">
		<optgroup label="Group 1" class="group-1">
			<option value="1-1">Option 1.1</option>
			<option value="1-2">Option 1.2</option>
			<option value="1-3">Option 1.3</option>
		</optgroup>
		<optgroup label="Group 2" class="group-2">
			<option value="2-1" disabled="disabled">Option 2.1</option>
			<option value="2-2">Option 2.2</option>
			<option value="2-3">Option 2.3</option>
		</optgroup>
	</select>
6.分组多选，可折叠，可全选下拉框：

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

效果如下：

[img]http://dl2.iteye.com/upload/attachment/0124/7857/ba9e83e0-a8f7-328b-947f-beee5aacc8eb.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0124/7859/6f29cacd-4ab4-308a-93c8-6ac88150917a.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0124/7861/7bbe84a8-f82f-3386-bc5a-f1ae73ec4571.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0124/7863/12e67095-6a8c-3ca3-b404-a5fab051cf38.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0124/7865/0552de3c-bb5c-3d90-8093-c0115a43a3bf.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0124/7867/f696cf33-fe22-3e3a-a72f-aa54960d3057.png[/img]


使用过程中发现与<link rel="stylesheet" href="static/css/ace.min.css" />的ace.min.css样式单冲突，multiselect下拉框checkbox不显示，

[img]http://dl2.iteye.com/upload/attachment/0124/8082/dee7f39e-ec71-3f87-b733-a47bec4efe73.png[/img]

查看下拉框与页面中的checkbox有什么不同，
发现页面中checkbox多了一个<span class="lbl"/>，而multiSelect 下拉框中的checkbox中没有，看看能不能，修改JS，bootstrap-multiselect_cn.js;在脚本中createOptionValue方法中，修改 
<script type="text/javascript" src="./dist/js/bootstrap-multiselect_cn.js"></script>
      /**
         * Create an option using the given select option.
         *
         * @param {jQuery} element
         */
        createOptionValue: function(element) {
            var $element = $(element);
            if ($element.is(':selected')) {
                $element.prop('selected', true);
            }

            // Support the label attribute on options.
            var label = this.options.optionLabel(element);
            var classes = this.options.optionClass(element);
            var value = $element.val();
            var inputType = this.options.multiple ? "checkbox" : "radio";

            var $li = $(this.options.templates.li);
            var $label = $('label', $li);
            $label.addClass(inputType);
            $li.addClass(classes);

            if (this.options.enableHTML) {
                $label.html(" " + label);
            }
            else {
                $label.text(" " + label);
            }
            //var $checkbox = $('<input/>').attr('type', inputType);

            var $checkbox =  $('<input/>').attr('type', inputType);
	    //测试修改如下
            //$checkbox.append('<span class="lbl"/>');
            //$checkbox.after('<span class="lbl"/>');
            //$('<input>').append('<span class="lbl"/>');
            //var $checkbox = $('<input/>').attr('type', 'radio'));
            //solve the ace-admin-min.css，input type is checkbox css collision
            //var $checkbox = $('<input/>').attr('class', "lbl");
            //.append('<span class="lbl"> 信用证</span>'
	    var name = this.options.checkboxName($element);
            if (name) {
                $checkbox.attr('name', name);
            }

            $label.prepend($checkbox);
	    ...
}

测试发现： 
$checkbox.append('<span class="lbl"/>');//这个不是我们想要的

我们想要的是after产生的效果， 
$checkbox.after('<span class="lbl"/>');//无效，jquery，找不到，

但通id可以，调用after可以产生效果，而$('<input/>').after和通过class找不到。
至于问什么，没能解决，知道可以给我留言，谢谢。
参考：
JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用:[url]http://www.cnblogs.com/wx1993/p/4806873.html[/url]

放弃修改Js，修改css，bootstrap-multiselect

修改 
<link rel="stylesheet" href="./dist/css/bootstrap-multiselect.css" type="text/css"/>

.multiselect-container>li>a>label>input[type=checkbox] {
	margin-bottom: 5px
}

为 
.multiselect-container>li>a>label>input[type=checkbox] {
	margin-bottom: 5px;
	margin-left: 20px;
	opacity:1;/*checkbox透明度*/
	position:relative	
}

添加如下样式： 
.multiselect.dropdown-toggle.btn.btn-default {
	background-color: #dbd8d8 !important;
	color: black !important;
	border: #c92727 !important;
	box-shadow: none !important;
	text-shadow: 0 -1px 0 #d8c8c8 !important;
}
.btn.btn-default.multiselect-clear-filter {
	background-color: #fff9f9 !important;
	border: #c34e4e !important;
}

使用!important主要是，主要让样式的优先级变高，可以来指定，不让ace.min.css覆盖：。
参考：
css样式加载顺序及覆盖顺序深入理解：[url]http://www.jb51.net/css/124992.html[/url]
html、css、js文件加载顺序及执行情况：[url]http://www.cnblogs.com/Walker-lyl/p/5262075.html[/url]
[size=medium][b]CSS样式加载顺序:[/b][/size]
1.<head>标签内有一个<link>标签引用外部CSS文件
2.内部css样式
3.标签style样式
即按在html中css出现的顺序；但这些样式是有优先级的如下，
[size=medium][b]CSS样式覆盖顺序深入理解:[/b][/size]
1. 样式表的元素选择器选择越精确，则其中的样式优先级越高：
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高
注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。
3. 如果要让某个样式的优先级变高，可以使用!important来指定


测试页面： 
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="./bootstrap-multiselect-master/jquery/js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript">
			console.log("start");
			$(document).ready(function() {
				//$('<input/>').append('<span class="lbl"/>');
				//var $input = $('<input/>').attr('type', 'checkbox');
				// $('<input>')创建一个input标签
				var $input = $('<input>').attr('type', 'checkbox');
				$input.val("c");
				$input.addClass("multiselect-ace")
				$(".multiselect-ace").after('<span class="lbl"/>');
				//$input.append('<span class="lbl"/>');
				//$input.after('<span class="lbl"/>');//无效，jquery，找不到，
				$('<span class="lbl"/>').insertAfter($input);
				//$('<span class="lbl"/>').appendTo($input);
				//$input.appendTo('<span class="lbl"/>');
				//var $input = $('<input/>').append('<span class="lbl"/>');
				$("#test").append($input);
				//$("#test").after('<span class="lbl"/>');
				//alert( $('<input/>').val());

			});
		</script>
	</head>
	<body>
		<select>
			<option>test</option>
		</select>
		<BR/>
		<input id="test" type="radio" name="test" value="v"/>
		<BR/>
		<!-- <input type="checkbox"/> -->
	</body>
</html>

Donald_Draper
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery bootstrap 下拉多选框
03-19
jquery bootstrap 下拉多选框 demo 实现 yeah yeah yeah
Bootstap中下拉框多选
F_Z_S的博客
01-20 194
需要引入的个文件 bootstrap-select.js bootstrap-select.css bootstrap.min.js 百度网盘下载连接: 链接：https://pan.baidu.com/s/11iMeSZXAY4yabVfL5waf1w 提取码：ii11 第一步: js中写下拉框默认值 $(document).ready(function() { $('.selectpicker').selectpicker({ noneSele.
bootstrap下拉多选框
Timi2019的博客
07-24 4128
【代码】bootstrap下拉多选框。
bootstrap下拉式多选框
肉丸不肉
05-28 3145
index.html &amp;lt;select id=&quot;usertype&quot; name=&quot;usertype&quot; class=&quot;selectpicker show-tick form-control&quot; multiple data-live-search=&quot;false&quot;&amp;gt; &amp;
零零碎碎bootstrap 多选下拉框
Migu4423的专栏
04-06 444
附上官网api链接，http://silviomoreto.github.io/bootstrap-select/. 以下内容，大部分摘自文章：https://www.cnblogs.com/anny0404/p/5329960.html 笔者再自行根据需要添加必要的内容。 html页面中，引用如下： <!-- Latest compiled and minified CSS --> ...
bootstrap-multiselect
02-13
Bootstrap Multiselect是一款基于Bootstrap框架的插件，专为创建功能丰富的多选下拉菜单而设计。这个插件扩展了HTML `<select>` 元素，使其能够以美观且用户友好的方式呈现多选选项。在本文中，我们将深入探讨...
Bootstrap 下拉多选框插件Bootstrap Multiselect
08-31
Bootstrap Multiselect 是一个基于 Bootstrap 框架的插件，用于创建美观且功能丰富的下拉多选框。这个插件提供了许多自定义选项和功能，使得在网页表单中实现多选功能变得更加简单和直观。以下是对这个插件的详细...
ngx-bootstrap-multiselect:Angular 9+下拉多选引导程序
04-14
依存关系Bootstrap CSS 3或4 真棒字体（可选）安装使用安装： npm install ngx-bootstrap-multiselect --save 。用法将NgxBootstrapMultiselectModule导入您的@NgModule。 import { NgxBootstrapMultiselectModule }...
bootstrap-multiselect下拉多选框
07-10
例如，如果你想在运行时动态改变多选框的配置，可以先`destroy`再重新`multiselect`： ```javascript // 销毁多选框 $('#example-get-selected-values').multiselect('destroy'); // 重新初始化，使用新的配置 $('...
使用bootstrap实现多选下拉框
04-23
使用bootstrap实现多选下拉框
利用Bootstrap Multiselect实现下拉框多选功能
11-29
利用Bootstrap Multiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值 首先展示项目案例: 多选下拉框功能实现.gif 下面是所有完整的代码,重点以及主要的解释已经在代码内进行注释: 引入的css、js文件需要从github中下载:https://github.com/davidstutz/bootstrap-multiselect 插件依赖jQ和bootstrap,所以在引入插件之前需要先引入这jQ和bootstrap的css和js文件。 <!DOCTYPE html> <html lang="en"> <head> <meta
JQ JS javascript 多选 多选下拉框 select bootstrap-select
04-18
JQ JS javascript 多选 多选下拉框 select bootstrap-select
bootstrap-multiselect下拉框多选单选条件筛选
07-19
bootstrap-multiselect，使用了bootstrap风格实现下拉框的条件检索、多选、单选控制
bootstrap-multiselect-master
09-20
bootstrap-multiselect-master
下拉选择框（bootstrap-select 多选）
三思微糖的博客
11-02 455
效果图 （不带搜索框） 效果图 （带搜索框） 需要引用的js < script language=“javascript” src="…/…/js/bootstrap-select.js">< /script> < script language=“javascript” src="./…/js/bootstrap-select.min.js">< /script> 需要引用的css < link href="…/…/css/bootstrap-
bootstrap下拉多选框实现
q370786406的博客
02-14 3860
bootstrap下拉多选框实现
bootstrap-select 插件示例
weixin_30949361的博客
09-04 866
本文原创地址：http://www.cnblogs.com/landeanfen/p/7457283.html 一、组件开源地址以及API说明 bootstrap-select开源地址：https://github.com/silviomoreto/bootstrap-select bootstrap-select使用示例：http://silviomoreto.github....
bootstrap-multiselect 多选下拉框
最新发布
weixin_42955679的博客
03-21 695
多选下拉框加联动
bootstrap-multiselect 下载
11-12
你可以通过在GitHub上搜索 "bootstrap-multiselect" 来找到该项目的页面。然后，你可以在项目页面的右上方找到 "Clone or download" 按钮，点击它将会弹出一个窗口，你可以选择直接下载zip文件或者复制项目的Git链接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值