bootstrap selectpicker 选择框使用技巧及常见的一些方法

最新推荐文章于 2025-03-13 14:48:22 发布

chicheese

最新推荐文章于 2025-03-13 14:48:22 发布

阅读量1w

点赞数 2

分类专栏： bootstrap selectpicker 文章标签： bootstrap selectpicker

本文链接：https://blog.csdn.net/qq_34828100/article/details/89713333

版权

bootstrap 同时被 2 个专栏收录

1 篇文章

订阅专栏

selectpicker

1 篇文章

订阅专栏

最近项目要用一个选择框，可模糊搜索，可全选，及取消全选的选择框，在各个选择框插件中遇到了selectpicker这个插件，觉得这个插件强大，看着也比较舒服，下面介绍一下它的一些使用方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=yes">
    <title>带有搜索的下拉框</title>
    <!-- <script src="jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> -->
	<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>  
	<script src="bootstrap.js"></script>
	<script src="bootstrap-select.js"></script>
	<link href="bootstrap.css" rel="stylesheet">
	<link href="bootstrap-select.css" rel="stylesheet">
    <style>
        /** body,
            html {    width: 100%;   overflow: hidden;      }
		
            .searchBox {    margin: 10px;    }

            @media only screen and (min-width: 1200px) {
                .searchBox {     margin: 10px 20%;     }
            }
	**/
	.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
	    width: 30%;
	}
    </style>
</head>
<body>
	<div style="margin-top: 20px;" align="center">
		<select id="multiple_select" class="selectpicker" data-live-search="true" data-actions-box="true" multiple="multiple" style="width: 100px">
			<!--<option value="cp">C++</option>
			<option value="cs">C#</option>
			<option value="oc">Object C</option>
			<option value="c">C</option>
			<option value="js">JavaScript</option>
			<option value="php">PHP</option>
			<option value="asp">ASP</option>
			<option value="jsp">JSP</option>
			<option value="js">Python</option>
			<option value="php">JAVA</option>
			<option value="asp">ASP</option>
			<option value="jsp">JSP</option>-->
		</select>
	</div>
	<script type="text/javascript">
	    $('.selectpicker').selectpicker({
                header: 'Select a condiment',
                'selectedText': 'cat',
                'noneSelectedText': '请选择名称',
                'deselectAllText': '取消全选',
                'selectAllText': '全选'
            });
	    var se = $("#multiple_select");
	    se.append('<option value="java">JAVA</option>');
	    se.append('<option value="js">JavaScript</option>');
	    se.append('<option value="jsp">JSP</option>');
	    se.append('<option value="python">Python</option>');
	    se.append('<option value="cp">C++</option>');
	    se.append('<option value="cs">C#</option>');
	    se.append('<option value="oc">Object C</option>');
	    se.append('<option value="c">C</option>');
	    se.append('<option value="asp">ASP</option>');
	    $(window).on('load', function() {
		se.selectpicker('refresh');
	    });
	</script>
</body>
</html>

其中，会比较多使用到的如：

// refresh方法更新选项以匹配新状态
$('.selectpicker').selectpicker('refresh');
// 选中多选中的所有项目
$('.selectpicker').selectpicker('selectAll');
// 取消选择(清空)多选中的所有项目
$('.selectpicker').selectpicker('deselectAll');
// 获取select框中所有选中的值
$('.selectpicker').selectpicker('val', 'Mustard'); 
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

下面使用 selectpicker 实现两级联动

HTML代码：

<select id="type" class="selectpicker">
	<option value="vague" selected="selected">模糊查询</option>
	<option value="accurate">精确查询</option>
</select>

<select id="Key" class="selectpicker" onchange="Key(this)">
	<option value="fruit">水果</option>
	<option value="vegetables">蔬菜</option>
</select>

JS代码：

// 实现两级联动
function selectMetaDataKey() {
	var x = $("#type");  
	var y = $("#Key");  
	y[0].options.length = 0; // 清除Key下拉框的所有内容  
	if(x[0].selectedIndex == 0) {  
		//y[0].options.add(new Option("水果", "fruit", false, true));  // 默认选中fruit
		y[0].options.add(new Option("苹果", "apple", false, true));  // 默认选中apple
		y[0].options.add(new Option("香蕉", "banana"));  
	}  
	if(x[0].selectedIndex == 1) {  
		y[0].options.add(new Option("水果", "fruit", false, true));  // 默认选中fruit
		y[0].options.add(new Option("蔬菜", "vegetables"));
	}  
	x.selectpicker('refresh');
	y.selectpicker('refresh');
}

以下是关于 selectpicker 的使用博客：