select2的基本用法
--select2
https://select2.org/
https://select2.org/data-sources/ajax
公司有个项目需要用到类似百度搜索功能的下拉框,自然想到使用select2。
先看下select2的效果图,如下:
下来简单介绍下这个控件的基本用法,主要简单介绍下远程加载数据;
1.首先引入需要的文件:select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上.
2.远程加载数据示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
与普通ajax调用不同的是data和processResults;
注意 data方法里面有个q:params.term这个是干什么的呢?其实这是获取当前输入值的,也就是上图中的“1”。这里的q:params.term;使用的时候直接照搬就行;当然你也可以把q换成你喜欢的参数名字。
processResults里面就是从后台获取数据结果的;最终返回的数据的格式一般是这样子:"[{id:0,text:'a'},{id:1,text:'b'}]"(select2默认的数据属性是id、text听说新版本可以自定义);
minimumInputLength同字面意思,即限制最少输入一个字符;
placeholder等同文本框的placeholder;
allowClear:true表示允许清除选中的内容,即为true的时候图中的“1”右边会出现一个“x”,点击后可以清除掉输入框的内容;
本人在使用的时候在这里遇见了一个大坑,就是你写了allowClear:true,但是点击上面的“x“后,没有反应,纳尼,嘛情况!
网上查了下,有人说,要allowClear:true生效,必须要设置placeholder属性,可是我写了呀。难道js文件和select2版本不匹配?
尝试个多个版本的js和select2还是这问题;
今天突然看到一篇外国的文章,解决了这个问题,其实很简单就是要allowClear:true生效,必须在<select>标签中添加一个空的<option>节点(可以不设置placeholder属性,因为控件有默认值);如下:
<select id="simple" style="width: 120px;">
<option></option>
</select>
那这是为什么呢 ?原因是The first option must be empty in order to get placeholderworking!
<select class="select2_category form-control" multiple id="cityselect" tabindex="4" style="width: 120px" >
<option value=""></option>
<!--<option value="20" selected="selected">TOP20</option>-->
<!--<option value="30">TOP30</option>-->
<!--<option value="50">TOP50</option>-->
</select>
$('#cityselect').select2({
placeholder: '城市',
allowClear: true,
escapeMarkup: function(m) {
return m;
}
});
$("#cityselect").prop("disabled", true);
var getCity = function(country) {
$("#cityselect").empty();
$("#cityselect").append("<option value=''></option>");
if($("#countryselect").val() == "" || $("#countryselect").val() == null){
return;
}
$.ajax({
type: "GET",
url: ROOT_PATH+"tt/api/getCity",
data: {country : ($('#countryselect').val()!=null?$('#countryselect').val()+"":"")},
success: function (result) {
$("#cityselect").prop("disabled", false);
var cities = result.split(",");
for (var entry in cities) {
$("#cityselect").append("<option value='" + cities[entry] + "'>" + cities[entry] + "</option>");
}
},
error: function () {
toastr['error']("获取城市列表错误", "警告");
}
});
};