javascript - 当选择值作为另一个选择的函数动态加载时，如何在不使用 ctrl 键的情况下选择多个值

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

我认为主要问题是值是动态更新的，在代码运行时 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"
       });
   });
});

Here's a test fiddle