select2
效果如下：
标签 <input id='select' type='text' ><select id='select'></select >//版本4以前的用input，版本4以后的用select js代码 function search2ProductList(){ ("#select").select2({ language: "zh-CN", //设置语言 placeholder: "--请选择产品--", //默认文本 allowClear: true, //为true在框内有删除x, false不可清除 width: '226px', //选择框宽度 multiple: true,//是否允许选择多个值 formatNoMatches: '没有符合条件的信息！',//当搜索不到的时候的提示语 dropdownCssClass: 'select2Class', //给下拉添加类名 ajax: { url: 'getSelectData', dataType: 'json', delay: 250, data: function (params) { return { //版本4以前的用params : params，4以后的用userName: params.term || '' params : params //下拉框中输入的参数 }; }, //版本4以前的用results，4以后的用processResults results: function (data, params) { var array = new Array(); if (data.bo) { for (var i = 0; i < data.length; i++) { array.push({id: data[i].id, text: data[i].name, qita: data[i].qita}); //id为必须的 //text为展示的内容 //qita为自己命名的一些数据可以有多个自定义数据 } } var result = new Object(); result.results = array; return result; }, formatSelection: function () { //当前选择的数据 } } }); $("#select_product").on("change", function (e) { //下拉时候的事件 var name = e.added.name; //获取当前的值 });}
**
一些常用事件
**
$("#select2").on("select2-opening", function (e) { console.log('下拉列表打开中调用'); }); $("#select2").on("select2-open", function (e) { console.log('显示下拉列表后调用'); }); $("#select2").on("select2-close", function (e) { console.log('关闭下拉列表后调用'); }); $("#select2").on("select2-highlight", function (e) { console.log('在下拉列表中突出显示某个选项时调用'); });$("#select2").on("select2-selecting", function (e) { console.log('在下拉列表中选择某个选项时，但在对该选项进行任何修改之前调用'); }); $("#select2").on("select2-clearing", function (e) { console.log('清除选择的内容的时候调用'); }); $("#select2").on("select2-removing", function (e) { console.log('当要在下拉列表或者输入框中删除某个选项，但尚未删除该选项时调用'); }); $("#select2").on("select2-removed", function (e) { console.log('删除或清除选项时调用'); }); $("#select2").on("select2-loaded", function (e) { console.log('当查询函数加载完数据且结果列表已更新时调用'); }); $("#select2").on("select2-focus", function (e) { console.log('在控件聚焦时触发'); });$("#select2").on("select2-blur", function (e) { console.log('在控件失去焦点时触发'); });