在jsp中初始化单选Select2

2017-10-12 · 🙈Lei · 0条 · 688次

说明:我使用的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 中元素各个值的含义。




  1