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

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

二话不说上代码：

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

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

<script type="text/javascript" src="${base}/resources/console/js/plugins/chosen/chosen.jquery.js"></script>

demo1:

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

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

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

        [#list members as member]

        <option value="${member.id}" hassubinfo="true" >${member.realName}(${member.mobile})</option>

        [/#list]

    </select>

</div>

demo2:

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

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

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

[#list members as member]

<option value="${member.id}" hassubinfo="true" 

[#list linkMembers as linkMember]

#if member.id==linkMember.id ]

 selected="true"

[/#if]

[/#list]

 >

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

</option>

[/#list]

</select>

</div>

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

<script>

    var config = {

        '.chosen-select': {},

        '.chosen-select-deselect': {

            allow_single_deselect: true

        },

        '.chosen-select-no-single': {

            disable_search_threshold: 10

        },

        '.chosen-select-no-results': {

            no_results_text: '无选择项'

        },

        '.chosen-select-width': {

            width: "95%"

        }

    }

    for (var selector in config) {

        $(selector).chosen(config[selector]);

    }

</script>

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