如何在选择值作为另一个选择的函数动态加载时不使用ctrl键选择多个值

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

本文关键字：选择 加载 ctrl 函数 另一个 动态      更新时间：2023-09-26

我在我的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的listmultichoice创建的)。

为了在不按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中尝试了类似的多选择，它允许我选择多个值，只需点击鼠标，所以我怀疑我可以接近解决方案。什么好主意吗?

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

这是一个测试小提琴

看起来你把你的代码放在头部部分，你应该试试这个:

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

try 2 use select2multichoice of select2 library.

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

相关文章：