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

$("#simple").select2({                 ajax: {                     url: 'Handler1.ashx',                     dataType: "json",                     delay: 250,                     data: function (params) {                         return {                             q: params.term                         };                     },                     processResults: function (data) {                         return {                             results: data                         };                     },                     cache: true                 },                 escapeMarkup: function (markup) { return markup; },                 minimumInputLength: 1,                 placeholder: '请选择',                 allowClear: true             });

与普通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']("获取城市列表错误", "警告");
        }
    });
};