javascript - How to select multiple values without ctrl key when select values are loaded dynamically as a function of another select

Question

我在我的 Web 应用程序中使用了“wicket”框架。我有两个这样的选择：

<select wicket:id="brands" onchange="applyMultiSelection ();">
 <option value="volvo">Volvo</option>
</select>

<select wicket:id="models" id="models">
 <option value="A">A</option>
</select>

使用 wicket 模型，第二个值在第一个值被选中后动态加载。第二个是多选（使用 wicket 的 ListMultipleChoice 创建）。

为了在不按 ctrl 键的情况下选择多个值，我在 html 头中添加了以下内容：

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

<style type="text/css">
    .multi-selection {
        background-color: Highlight;
        color: HighlightText;
    }
</style>

    <script type="text/javascript">
        // Applies multiselection on select tags
        var multiselection = function(){
            $("#models").MultiSelect({
                css_class_selected: "multi-selection"
            });
        };

        function applyMultiSelection () {
            $('#models').ready( multiselection() );
        }
    </script>

它似乎不起作用，我已经为静态 html 中的多选尝试了类似的东西，它允许我只需用鼠标点击就可以选择多个值，所以我怀疑我可能接近解决方案。有任何想法吗？

Answer 1

尝试 2 使用 select2 库的 select2multichoice。

http://ivaynberg.github.io/select2/

它非常有用且简单集成。

Answer 2

我认为主要问题是值是动态更新的，在您的代码运行时select可能是空的。您可以通过将功能合并为一个来进一步缩短脚本。

$(function(){ // this is short for $(document).ready()
     function applyMultiSelection (){
         $("#models").MultiSelect({
             css_class_selected: "multi-selection"
         });
     };
});

如果您无法编辑脚本以添加触发事件或类似的东西，我可以建议使用以下插件。

https://github.com/hazzik/livequery/blob/master/jquery.livequery.js

该插件将检查是否option添加或创建了新元素。现在每次动态添加新元素时，插件都应该运行.MultiSelect()

$(function(){ 
   $("#models option").livequery(function () {
       $("#models").MultiSelect({
             css_class_selected: "multi-selection"
       });
   });
});

这是一个测试小提琴

Answer 3

看起来您将代码放在 head 部分，您应该尝试以下操作：

<script type="text/javascript">
    $(function(){
        // Applies multiselection on select tags
        var multiselection = (function(){
            $("#models").MultiSelect({
                css_class_selected: "multi-selection"
            })();
        };
    });
</script>