当前位置: 首页 > 工具软件 > Select2 > 使用案例 >

select2动态添加option

华宪
2023-12-01

背景

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

 类似资料: