一、Select2的功能简介
select2插件给我们带来了更加友好的交互方式，比如查询控件展开后可通过关键字进行检索
例如：
Select2也可以选择带查询控件的选择框…
Select2更是支持多值选择框…
二、如何使用Select2？
将以下两行代码添加到html页面，即完成了Select2的引入：
-
<link href=“https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css” rel=“stylesheet” />
-
<script src=“https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js”></script>
注意：还需引入jquery支持select2的使用
2.2 通过离线引用
到Select2官网下载对应版本的库，通过工程的相对路径完成Select2的引入：
2.2.1 引入js资源库
Select2的库下载后放在工程的webapp—>js文件夹中，Select2库的文件名称是“select2.min.js”
因此引入路径为：【/js/select2.min.js】
2.2.2 引入css样式
三、Select2常用API
3.1 源码
-
<span>区域：</span>
-
<select id=“area” class=“select2”>
-
<option value=“” selected=“selected”>请选择区域</option>
-
<option value=“1“>珠海</option>
-
<option value=“2“>深圳</option>
-
<option value=“3“>澳门</option>
-
<option value=“4“>香港</option>
-
</select>
3.2 初始化select2
-
<script type=“text/javascript”>
-
//页面加载完成后初始化select2控件
-
$(function () {
-
$(“#area”).select2();
-
});
-
</script>
select2()函数可添加相应配置：
-
$(‘#area’).select2({
-
placeholder: ‘请选择区域’
-
});
3.3 选中控件id=”area”、value=”1″的元素
-
//初始化select2
-
var areaObj = $(“#area”).select2();
-
var optionVal = 1;
-
areaObj .val(optionVal).trigger(“change”);
-
areaObj .change();
3.4获取、更改select的value值
获取值：默认是获取当前控件选中元素对应的value值，参照3.1源码中，假设当前选中“珠海”，那么获取的value值就是1
$("#area").select2('val');更改值：将val更改为756；默认是更改当前控件选中元素对应的value值，参照3.1源码中，假设当前选中“珠海”，那么更改后的value值就是756
$("#area").select2('val','756');
三、使用select2.js 时 根据val和text选中问题
当知道select option的val值时使用：
$(‘#id’).val(“值”).trigger(“change”);
当知道select option的text值时使用：
$(“#id option:contains(“值”).attr(“selected”, true).trigger(“change”);
四、select2如何设置默认空值
1、问题背景
select2搜索下拉框，当满足某种条件时，让它默认选中空值
2、问题原因
-
-
<html>
-
<head>
-
<meta charset=“UTF-8”>
-
<title>select2默认选择空值</title>
-
<link rel=“stylesheet” href=“../css/select2.css” />
-
<script src=“../js/jquery-3.2.1.js”></script>
-
<script src=“../js/select2.js”></script>
-
<script>
-
$(function(){
-
$(“#selectNull”).select2();
-
-
$(“#selectNull”).on(“select2:select”,function(){
-
var data = $(this).val();
-
if(data==“3”)
-
{
-
$(“#selectNull”).val(“”);
-
}
-
});
-
});
-
</script>
-
</head>
-
<body>
-
<div>
-
<select id=“selectNull” class=“js-example-basic-single” style=“width:400px;”>
-
<option value=“”></option>
-
<option value=“1”>AA</option>
-
<option value=“2”>BB</option>
-
<option value=“3”>CC</option>
-
<option value=“4”>DD</option>
-
<option value=“5”>EE</option>
-
<option value=“6”>FF</option>
-
</select>
-
</div>
-
</body>
-
</html>
如果直接利用$(“#selectNull”).val(“”); 发现效果不佳；
或者利用$(“#selectNull”).select2.select2.(“val”,””);也不行
3、解决办法
-
-
<html>
-
<head>
-
<meta charset=“UTF-8”>
-
<title>select2默认选择空值</title>
-
<link rel=“stylesheet” href=“../css/select2.css” />
-
<script src=“../js/jquery-3.2.1.js”></script>
-
<script src=“../js/select2.js”></script>
-
<script>
-
$(function(){
-
$(“#selectNull”).select2();
-
-
$(“#selectNull”).on(“select2:select”,function(){
-
var data = $(this).val();
-
if(data==“3”)
-
{
-
$(“#selectNull”).val(“”).select2();
-
}
-
});
-
});
-
</script>
-
</head>
-
<body>
-
<div>
-
<select id=“selectNull” class=“js-example-basic-single” style=“width:400px;”>
-
<option value=“”></option>
-
<option value=“1”>AA</option>
-
<option value=“2”>BB</option>
-
<option value=“3”>CC</option>
-
<option value=“4”>DD</option>
-
<option value=“5”>EE</option>
-
<option value=“6”>FF</option>
-
</select>
-
</div>
-
</body>
-
</html>
使用$(“#selectNull”).val(“”).select2(); 这样才有效
原文链接：https://www.cnblogs.com/bianchengxia/p/14216194.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/4140
