1、如何支持中文

提示为中文信息,输入框支持中文输入法

解决方案

引入中文包,并且一定要放在select2.js之后

基础引入代码

  • HTML代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!--// 引入css样式-->
    <link type="text/css" rel="stylesheet" href="/css/select2.css">

    <!--// 引入html-->
    <div class="form-group m-form__group">
    <label for="selectProduct">产品</label>
    <select class="js-select2 form-control" id="selectProduct" name="selectProduct" data-allow-clear="true" data-placeholder="请选择一项" tabindex="-1">
    </select>
    </div>

    <!--// 引入js-->
    <script type="text/javascript" src="/js/select2.full.min.js"></script>
    <script type="text/javascript" src="/js/i18n/zh-CN.js"></script></span>
  • js调用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    $("#selectProduct").select2({
    ajax:
    {
    url: "getProducts",
    dataType: 'json',
    type: 'POST',
    delay: 250,
    data: function (params)
    {
    var param = new Object();
    param.name = params.term;
    return param;
    },
    processResults: function (resp, page)
    {
    var array = new Array();
    if (resp.products)
    {
    for (var i = 0; i < resp.products.length; i++)
    {
    var product = resp.products[i];
    array.push({
    id:product.productId,
    text: product.productName
    });
    }
    }
    var ret = new Object();
    ret.results = array;
    return ret;
    },
    cache: true
    },
    minimumInputLength: 2,
    language: "zh-CN", // 引入中文
    });

默认文字,不出现在下拉选项中

解决方案一:添加disabled属性

默认文字option添加disabled属性,使其不可选中。

数据插入示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('#bank').select2({
language: "zh-CN"
});
getBankList();

function getBankList(){
var result = res.data;
var op = '<option value="" disabled selected hidden>请选择收款人银行</option>';
$("#bank").append(op);
$(result).each(function(index,item){
var op2 = '<option value="' + item.bankCode + '">' + item.bank + '</option>';
$("#bank").append(op2);
});
}

解决方案二:通过placeholder插入默认文字

数据插入示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#parentUser').select2({
placeholder: "请选择渠道管理员"
});
getParentUser();

function getParentUser(){
$("#parentUser").empty();
var result = res.data;
var op = '<option></option>'; // 在顶部插入空option
$("#parentUser").append(op);
$(result).each(function(index,item){
var op2 = '<option value="' + item.username + '" data-id="'+ item.settlRate +'">' + item.username + '</option>';
$("#parentUser").append(op2);
})
}

注意:需要在顶部插入一个空的option,用来显示select2设置的placeholder默认文字。

搜索框提示文字

解决方案

通用方式

通用方式:适用于所有搜索框使用相同的提示文字情况

1
2
3
4
5
6
$(".js-select2").on("select2:open", function() {
$(".select2-search__field").attr("placeholder", "搜索...");
});
$(".js-select2").on("select2:close", function() {
$(".select2-search__field").attr("placeholder", null);
});

精细方式

精细方式:不同的select2搜索框使用各自设置的提示文字

1
<select class="js-select2 taxon-select2" name="role" data-searchplaceholder="搜索分类">

1
2
3
4
$('.js-select2').on('select2:open', (element) => {
const text = element.currentTarget.dataset.searchplaceholder;
$('.select2-search__field').attr('placeholder', text);
});