select2各参数的设置相关笔记
⼀、初始化，实现中⽂提⽰显⽰
⾸先必须要引⼊中⽂包，且⼀定要放在select2.js之后
<link type="text/css" rel="stylesheet" href="/css/select2.css">
<script type="text/javascript" src="/js/select2.full.min.js"></script>
<script type="text/javascript" src="/js/i18n/zh-CN.js"></script></span>
$(".selectProduct").select2({
ajax:
{
url: "getProducts",
dataType: 'json',
type: 'POST',
delay: 250,
data: function (params)
{
var param = new Object();
param.name = ;
return param;
},
processResults: function (resp, page)
{
var array = new Array();
if (resp.products)
{
for (var i = 0; i < resp.products.length; i++)
{
var product = resp.products[i];
array.push({id:product.productId, text: product.productName});
}
}
var ret = new Object();
return ret;
},
cache: true
},
minimumInputLength: 2,
language: "zh-CN",
}); </span>
⼆、select2常⽤的属性：
var  itemList = [{id:1,text:'测试1'}{}{}{{}{}{}{}];//类似的json数组格式
三、加载本地数据：
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: ,
};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
说明：
1.q: 查询参数（表⽰输⼊框中内容，q发⽣到服务器的参数名；所以这⾥你可以添加⾃定义参数，如：stype:'person'）
2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在s下，则返回s。这个与服务器返回json有关）
3.minimumInputLength 最⼩需要输⼊多少个字符才进⾏查询，与之相关的maximumSelectionLength表⽰最⼤输⼊限制。
4.escapeMarkup字符转义处理
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)
{
alert("你没有选中任何项");
}
if(reslist.length)
{
alert("你选中任何项");input标签placeholder属性
}
六、清空选择项和设置不可⽤
//清空选择
$("#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
});
⼋、新⽼版本对⽐
注意事项：
版本的select2如果引⽤的jquery版本较低的话，某些功能⽆法正常使⽤。⽐如：清除功能allowClear: true
最新版本请使⽤<select></select>标签（对于本地化的数据你可以使⽤input，但ajax远程数据必须使⽤select）相关⽹站：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。