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

我在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>

沃尔沃汽车
A.

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

为了在不按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>

.多选{
背景色：高光；
颜色：高亮文本；
}
//对选择标记应用多重选择
var multiselection=函数（）{
$（“#模型”）.MultiSelect({
css_类_选择：“多选”
});
};
函数applyMultiSelection（）{
$（'#models'）.ready（multiselection（））；
}

---

这似乎不起作用，我在静态html中尝试了类似的multi-select，它允许我只需单击鼠标即可选择多个值，因此我怀疑我可能接近解决方案。有什么想法吗？

看起来您正在将代码放在标题部分，您应该尝试以下方法：

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

$（函数（）{
//对选择标记应用多重选择
var multiselection=（函数（）{
$（“#模型”）.MultiSelect({
css_类_选择：“多选”
})();
};
});

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

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

$（函数（）{
//对选择标记应用多重选择
var multiselection=（函数（）{
$（“#模型”）.MultiSelect({
css_类_选择：“多选”
})();
};
});

我认为主要的问题是值是动态更新的，在代码运行时，

select

可能是空的。通过将函数合并到一个脚本中，可以进一步缩短脚本

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

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

此插件将检查是否添加或创建了新的

选项

元素。现在，每次动态添加新元素时，插件都应运行

.MultiSelect（）

---

我认为主要的问题是，值是动态更新的，在代码运行时，

select

可能是空的。通过将函数合并到一个脚本中，可以进一步缩短脚本

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

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

此插件将检查是否添加或创建了新的

选项

元素。现在，每次动态添加新元素时，插件都应运行

.MultiSelect（）

---

尝试2使用select2多选select2库

---

它非常有用且简单集成。

尝试2使用select2多选select2库

---

它非常有用且简单集成。

仅将

.ready（）

与

文档

类似

$（文档）.ready（函数（）{…}）；

@Spokey谢谢你的提示，我是jquery greenhornuse

.ready（）

仅与

文档

类似

$（文档）.ready（函数（）{…}）；

@Spokey谢谢你的提示，我是一名jquery Greenhorn我将代码更改为该代码，但似乎不起作用。你是否建议它不应该放在head部分？如果将js代码放在head部分，你必须等待DOM就绪。如果你在关闭body标记（）之前放置脚本，您没有，因为DOM已经“准备就绪”。我将代码更改为该代码，但它似乎不起作用。您是否建议它不应该放在head部分？如果将js代码放在head部分，您必须等待DOM就绪。如果您在关闭body标记（）之前放置脚本，则您没有，因为DOM已经“准备就绪”。“我认为主要问题是这些值是动态更新的"是的，这正是问题所在。我还怀疑使用wicket与此有关。它将javascript封装在CDATA之间。无论如何，感谢您的建议。@Jubbat我猜您不能更改wicket的脚本？如果您不介意使用插件，我可能已经找到了解决方案。请检查更新。非常感谢，这非常有效。我不知道w如果这太过分了，但我至少做到了。“我认为主要的问题是这些值是动态更新的”是的，这正是问题所在。我还怀疑使用wicket与此有关。它将javascript封装在CDATA之间。无论如何，感谢您的建议。@Jubbat我猜您不能更改wicket的脚本？如果您不介意使用插件，我可能已经找到了解决方案。请检查更新。非常感谢，这非常有效。我不知道w如果这太过分了，但我至少完成了。有趣的选择。多选没有我想要的那种视觉风格/功能，但我很高兴知道这个插件存在。有趣的选择。多选没有我想要的那种视觉风格/功能，但我很高兴知道这个插件存在。