在jsp中初始化单选Select2
说明:我使用的select2是4.0.3版本
4.0.3版本中初始化使用$('select').select2('val', '10001'); 4.1以后使用$('select').val('10001);
我用了上面的两个方法,都无法初始化。很明显是因为没有<option>选项,我使用js添加<option>选项后再调用这两个方法依然不行。最后弃用了。后来选择的初始化方法是:
先判断要不要初始化,如果需要则通过data-data属性来初始化。data-data是一个数组,因为是单选初始化,所以数组中只有一个对象,该对象包含id和text两个属性。
<span style="font-size: 16px;"><c:choose> //如果有值需要初始化 <c:when test='${not empty addModel.fatherStr}'> <ttf:select path="fatherId" class="free-select free-select2 col-xs-12" data-allow-clear="true" data-placeholder="请选择增员人" data-data='[{"id": "${addModel.fatherId}", "text": "${addModel.fatherStr}"}]'/> </c:when> //不需要初始化 <c:otherwise> <ttf:select path="fatherId" class="free-select free-select2 col-xs-12" data-allow-clear="true" data-placeholder="请选择增员人"/> </c:otherwise> </c:choose> </span>
2017-10-26弃用
说明:下面的方法确实可以初始化select2控件,但是实际上是给select2控件设置初始化下拉项,而且有个bug——无法使用ajax搜索其他选项。
在jsp或者php页面中使用插件的时候,如果后台返回的数据中含有值,那么页面会直接用这些值来初始化控件。如果想要在jsp页面中初始化带ajax搜索的select2的话,后台返回值如果无法直接初始化select2控件,需要使用下面的方法(jquery):
<span style="font-size: 16px;"><form:select path="fatherId" id="fatherId" items="${ }"/> <script> var data = new Array(); //定义一个数组 var fatherIdStr = '${model.fatherStr}'; //后台返回的数据 if(fatherIdStr != ''){ data.push({ id: '${model.fatherId}', //后台返回的数据 selected: true, text: fatherIdStr }); $("#fatherId").select2({data:data}); //将控件初始化 } </script> </span>
上面的代码很容易理解,就是从后台获取到id和text(id和text是select2使用ajax搜索的时候返回的json数据中的键),然后将id和textpush到一个数组中,将这个数组赋给select2控件就可以了。
如果对id和text不太理解,可以看一下另一篇博客《Select2的使用+搜索下拉框》,就可以理解了。这篇文章介绍了如何使用select2进行搜索查询,介绍了搜索查询后台需要返回的数据格式,如果理解了如何使用select2的ajax搜索查询,那么就可以很容易理解上面代码中 data.push 中元素各个值的含义。