jquery chosen插件—多选下拉框可搜索－传入后台选中项＋从后台读取选中项

这个是基于bootstrap工程，可能需要bootstrap的一些文件。

二话不说上代码：

首先引入css和js，文件自己下。

"${base}/resources/console/css/plugins/chosen/chosen.css" rel="stylesheet" type="text/css" />

demo1:

这里是freemaker简单的循环出option，将select的name设置为memberIds，后台获取的就是选中的option的值的数组。

"input-group" style="width:100%;">

    "请选择关联家长(可搜索名字)" name="memberIds" class="chosen-select" multiple style="width:100%;"  tabindex="4">

        [#list members as member]

        "${member.id}" hassubinfo="true" >${member.realName}(${member.mobile})

        [/#list]

   

demo2:

这里是后台向前台展示显示选中哪些选项，在option 里控制判断是否选中。可以选中多个哟。

"input-group" style="width:100%;">

"请选择关联家长(可搜索名字)" name="memberIds" class="chosen-select" multiple style="width:100%;"  tabindex="4">

[#list members as member]

[#list linkMembers as linkMember]

#if member.id==linkMember.id ]

 selected="true"

[/#if]

[/#list]

 >

${member.realName}(${member.mobile})

[/#list]

最后不要忘记需要js调用方法

这个script放在html的最下面。和页面加载顺序有关。