select2 使用方法总结

<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>

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 = ; 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: ,    //搜索框至少要输入的长度，此处设置后需输入才显示结果

        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 "输入号码搜索...";

    }

}

$("#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('')清除当前被选中的文本