select2动态添加option 背景html原来的实现javascirpt实现后端接口返回取值 修改后javascript实现后端接口返回结果取值 结论
背景
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":["fzdtd","含糊的鲜花","zydwk"]} 取值 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 Select2var option = new Option(jsonData[i].text, jsonData[i].id, true, true);$('#userSelect').append(option); }); $('#userSelect').trigger("change");}, });} 后端接口返回结果 {"respCode":10001,"respMsg":"获取用户列表成功","respData":[{"id":"zhangsan","text":"fzdtd"},{"id":"lisi","text":"含糊的鲜花"}]} 取值 var user= $("#userSelect").val(); 结论修改后，取值方式更方便，可以获取到后端接口返回的id值。