Jquery Multi select - 如何折叠选择组

Question

我正在使用位于http://www.erichynds.com/blog/jquery-ui-multiselect-widget 的 Jquery 多选工具，一切正常。我有一个很长的项目列表，并由 optgroups 划分。您必须滚动很多次才能到达最后一项，所以我想知道是否有一种方法可以默认折叠 opt 组？

我查看了有关此脚本的文档，但没有看到 optgroup 折叠的任何函数。

                <select name="selSea" id="selSeaShells" size="5" multiple="multiple" onchange="loopSelected()">
                    <optgroup label="Group 1"/>
                        <option value="test">test</option>
                        <option value="test1">test1</option>
                        <option value="test2">test2</option>
                        <option value="test3">test3</option>
                    <optgroup label="Group2"/>
                        <option value="test">test</option>
                        <option value="test1">test1</option>
                        <option value="test2">test2</option>
                        <option value="test3">test3</option>
                        <option value="test4">test4</option>
                    <optgroup label="Group3"/>
                        <option value="test">test</option>
                        <option value="test1">test1</option>
                        <option value="test2">test2</option>
                        <option value="test3">test3</option>
                        <option value="test4">test4</option>    
                 </select>  

Answer 1

你可以试试Select2。另外，你可以参考这个Stackoverflow discussion。

使用 Select2：

在您的 CSS 中，默认隐藏子结果：

.select2-result-sub > li.select2-result {
    display: none;
}

然后将其添加到您的 Javascript 文件中：

$('.select2-results').on('click', 'li', function(){
    $(this).find('li').show();
});