select2动态添加option

背景

select2 使用ajax remote加载数据方式时，不能使用$('#select2').val();的形式获取option的value，为了统一代码风格，需要把请求接口返回的结果以option的形式动态添加到select2组件上。

html

<select id="userSelect" name="userSelect" class="form-control" style="width: 150px"> </select>

原来的实现

javascirpt实现

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();

修改后

javascript实现

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值。