Select2.js下拉框使用小结

柠檬墨绿色

　　最新版本请使用<select></select>标签（对于本地化的数据你可以使用input，但ajax远程数据必须使用select）

　　二。placeholder

　　placeholder占位提示文字，如果需要清楚功能，则必须设置placeholder。

　　三。加载本地数据

　　select2默认的数据属性是id、text，新版本可以自定义，但还是用默认的比较好。所以提供的json中最好转换为id、text形式，当然可以添加其他属性。

　　var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

　　$（"#c01-select"）。select2（{

　　data: data,

　　placeholder:'请选择',

　　allowClear:true

　　}）

　　四。加载远程数据

　　$（"#c01-select"）。select2（{

　　ajax: {

　　url: "data.json",

　　dataType: 'json',

　　delay: 250,

　　data: function （params） {

　　return {

　　q: params.term,

　　};

　　},

　　processResults: function （data） {

　　return {

　　results: data

　　};

　　},

　　cache: true

　　},

　　escapeMarkup: function （markup） { return markup; },

　　minimumInputLength: 1,

　　templateResult: formatRepo,

　　templateSelection: formatRepoSelection

　　}）；

　　说明：

　　1.q: params.term 查询参数（params.term表示输入框中内容，q发生到服务器的参数名；所以这里你可以添加自定义参数，如：stype:'person'）

　　2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）

　　3.minimumInputLength 最小需要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。

　　4.escapeMarkup字符转义处理

　　5.templateResult返回结果回调function formatRepo（repo）{return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等

　　6.templateSelection选中项回调function formatRepoSelection（repo）{return repo.text}

　　7.关于返回的 json的格式：select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:'text',name:'liu'}]

　　五。获取选中项

　　var res=$（"#c01-select"）。select2（"data"）[0] ; //单选

　　var reslist=$（"#c01-select"）。select2（"data"）； //多选

　　if（res==undefined）

　　{www.9ask.cn/zhuzhou/

　　alert（"你没有选中任何项"）；

　　}

　　if（reslist.length）

　　{

　　alert（"你选中任何项"）；

　　}

　　六。清空选择项和设置不可用

　　//清空选择

　　$（"#c01-select"）。val（null）。trigger（"change"）；

　　$（"#c01-select"）。val（"你的placeholder"）。trigger（"change"）；//或者

　　//如果你使用的是input标签（默认就是本地数据），你可以用$（"#c01-select"）。val（''）；来清空选项

　　//disabled

　　$（"#c01-select"）。prop（"disabled", false）；//可用

　　$（"#c01-select"）。prop（"disabled", true）；//不可用

　　七。启用多选

　　$（"#c01-select"）。select2（{

　　data:data,

　　multiple: true