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") ; //单选
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
页:
[1]