官网: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在非查询时是空的