适用于Select2 4.0.8
初始化:
标签
<div class="form-group col-md-6">
<select id="select2_id" class="form-control" name="select2_name">
</select>
</div>
ajax动态赋值
$.ajax({
url:rootPath + "/project/select2_ids",
type:"GET",
success:function(result){
//console.log(result);
if(200==result.code){
$.each(result.extend.select2_ids, function(index, item) { //select2_id为数组
var option = $("<option></option>")
.append(item.engineerItCode).attr("value", item.id);
option.appendTo(ele);
});
}else{
alert_message(result.code);
}
}
});
启用函数
$("#select2_id").select2({
placeholder : "Select a domain",
allowClear : true
});
动态赋值1
$("#select2_id").val(result.value).select2();
$("#select2_id").val("").select2();
动态赋值2
这里val()中的“[ ]”可以一定程度上保证及时更新
$("#select2_id").val([result.extend.query_result.project]).trigger("change");
解决select2的input框无法获取焦点,无法输入的问题
重写enforceFocus方法,在script中加入下面语句即可:
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
select2使用模态框,搜索框无法输入
bootstrap的modal框中会自带一个属性tabindex="-1"
此属性作用是“设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。”
通过把tabindex设成1到32767的一个值,就可以把这个控件加入到TAB键的序列中。当浏览者使用TAB键在网页控件中移动时,将首先移动到具有最小tabIndex属性值的控件上,最后在具有最大tabIndex属性值的控件上结束移动。 如果有两个控件的tabIndex属性相同,则以控件在html代码中出现的顺序为准。默认的tabIndex属性为 0 ,将排列在在所有指定tabIndex的控件之后。 而若把tabIndex属性设为一个负值(如tabIndex="-1"),那么这个链接将被排除在TAB键的序列之外,光标也因此无法锚定在输入框中。
<div class="modal fade" id="add_task_modal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
将上面代码中的tabindex="-1"删掉即可
获取Select2控件上的值
$("#inpt_pjnm_selector").select2('data');
$("#inpt_pjnm_selector").select2('val');
$("#inpt_pjnm_selector").val();
$("#inpt_pjnm_selector option:checked").text();
$("#inpt_pjnm_selector option:checked").val();