select2使用方法總結

官網：http://select2.github.io/

調用

<link href="~/Content/select2.min.css" rel="stylesheet" />
<script src="~/Scripts/select2/select2.full.min.js"></script>
<script src="~/Scripts/select2/i18n/zh-CN.js"></script>

 

一、查詢

獲取當前選中值

$('#xxx').val()

 

電話號碼查詢示例

var selectTelehone;

$(function () {
    selectTelehone = $("#select-telehone");
    initSelectTelephone();
});

function initSelectTelephone() {
    selectTelehone.select2({
        ajax: {
            url: function (params) {
                return "/PartyA/Telephone/SearchByShortNumber?partyACompanyId=" + partyACompanyId + '&TelephoneNumber=' + params.term;
            },
            dataType: 'json',
            processResults: function (data, params) { 
                for (var i = 0; i < data.length; i++) {
                    data[i].id = data[i].Id;
                    data[i].text = data[i].TelephoneNumber;
                } 
                return {
                    results: data
                };
            },
            cache: true
        },
        allowClear: true,    //選中之后，可手動點擊刪除            
        placeholder: "輸入號碼搜索...",
        escapeMarkup: function (markup) { return markup; }, // 讓template的html顯示效果，否則輸出代碼
        minimumInputLength: 2,    //搜索框至少要輸入的長度，此處設置后需輸入才顯示結果
        language: "zh-CN",         //中文
        templateResult: formatTelehoneNumber, // 自定義下拉選項的樣式模板
        templateSelection: formatTelehoneNumberSelection     // 自定義選中選項的樣式模板
    });

    selectTelehone.on("select2:select", function (evt) {
        //這里是選中觸發的事件
        //evt.params.data 是選中項的信息
    });

    selectTelehone.on("select2:unselect", function (evt) {
        //這里是取消選中觸發的事件
        //如配置allowClear: true后，觸發
    });
}

function formatTelehoneNumber(item) {
    if (item.loading) return item;
    var markup = '<div> <p class="text-primary">電話號碼：' + item.TelephoneNumber + '</p>'; 
    //markup += '這里可以添加其他選項...';
    markup += ' </div>';
    return markup;
}


function formatTelehoneNumberSelection(item) {
    if (item.TelephoneNumber) {
        return item.TelephoneNumber;
    }
    else {
        return "輸入號碼搜索...";
    }
}

 

二、操作

1.清空選中項

$("#id")..unbind("change").bind("change", function () {
　　//變更事件
});

$("#id").select2().val(null).trigger("change");//如無業務需求也可不使用trigger("change")
$("#id").find("option").remove();//清除搜索時輸入的文字，默認會被記下、此操作僅在查詢使用ajax時使用

//以下清空選中/賦值文本，但是無清空選中項的值
//$("#select2-select-telehone-container")的‘select-telehone’為select的ID值
$("#select2-select-telehone-container").closest('.select2-container--below').addClass("select2-container--focus").removeClass("select2-container--below");//清除當前被選中的文本
$("#select2-select-telehone-container").prop("title", '');//清除當前被選中的title屬性，也可使用removeAttr('title')
$("#select2-select-telehone-container").html('<span class="select2-selection__placeholder">默認提示文本</span>')； //也可使用html('')清除當前被選中的文本

 

2.設置選中項

$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });//如果使用ajax獲取數據，無法使用本方法，因為option在非查詢時是空的