select2 使用ajax remote加载数据方式时,不能使用$('#select2').val();
的形式获取option的value,为了统一代码风格,需要把请求接口返回的结果以option的形式动态添加到select2组件上。
<select id="userSelect" name="userSelect" class="form-control" style="width: 150px"> </select>
function initSelect(stable,type) {
$('#userSelect').select2({
placeholder : '选择用户',
minimumResultsForSearch : -1,// 不展示搜索框
ajax : {
url : "/user/list",
type : 'get',
dataType : 'json',
data : {
'stable' : stable,
'type' : type
},
processResults : function(data) {
// 是否隐藏稳定环境的选项
var jsonData = data['respData'];
return {
results : $.map(jsonData, function(item) {
var i = 1;
return {
text : item,
id : i++
}
})
};
},
}
});
}
{"respCode":10001,"respMsg":"获取用户列表成功","respData":["张三","李四","王五"]}
var user = $("#select2-userSelect-container").text();
function initSelect(showStable, type) {
$('#userSelect').select2();
$('#userSelect').val(null).trigger('change');// 加载静态框时先清空。
$.ajax({
url : "/user/list",
type : 'get',
async : false,
data : {
'stable' : stable,
'type' : type
},
dataType : 'json',
success : function(data) {
var jsonData = data['respData'];
console.log(jsonData);
$.each(jsonData, function(i) {
// create the option and append to Select2
var option = new Option(jsonData[i].text, jsonData[i].id, true, true);
$('#userSelect').append(option);
});
$('#userSelect').trigger("change");
},
});
}
{"respCode":10001,"respMsg":"获取用户列表成功","respData":[{"id":"zhangsan","text":"张三"},{"id":"lisi","text":"李四"}]}
var user= $("#userSelect").val();
修改后,取值方式更方便,可以获取到后端接口返回的id值。