jquery - jQuery多选另一个自动多选
问题描述
我有 2 个列表框。当我在第一个列表框中进行选择时,我需要它在后续列表框中自动选择相应的选项。如果我选择单个项目(儿童),我会得到我需要的结果。我遇到的问题是,如果我选择了两个项目(子项),我没有在随后的 listboxfors 中选择这两个项目。下面是我的列表框。
@Html.ListBoxFor(m => m.MajorMultiSelects,
new MultiSelectList(Model.Majors, "Code", "Name"),
new { style = "/*display:block;*/" })
@Html.ListBoxFor(m => m.MultiSelectMajorGpas,
new MultiSelectList(Model.MajorGpas, "Code", "Name"),
new { style = "/*display:block;*/" })
下面是我用来进行选择的 jquery。
$("#MajorMultiSelects").change(function() {
console.log("change");//MultiSelectMajorGpas
if ($('#MajorMultiSelects option:nth-child(1)').is(":selected")) {
console.log("1");
$("#MultiSelectMajorGpas option:eq(0)").prop("selected", true);
$("#MultiSelectMajorGpas option:eq(1)").prop("selected", false);
}
else if ($('#MajorMultiSelects option:nth-child(2)').is(":selected")) {
console.log("2");
$("#MultiSelectMajorGpas option:eq(0)").prop("selected", false);
$("#MultiSelectMajorGpas option:eq(1)").prop("selected", true);
}
//else if ($('#MajorMultiSelects option:nth-child(1)').is(":selected") && $('#MajorMultiSelects option:nth-child(2)').is(":selected")) {//This works opposite of what I need. If both items are not selected in listboxfor 1 then items in listboxfor 2 are both selected which is not what I want.
// console.log("1 & 2");
// $("#MultiSelectMajorGpas option:eq(0)").prop("selected", true);
// $("#MultiSelectMajorGpas option:eq(1)").prop("selected", true);
//}
//else {//This doesn't work at all.
// $("#MultiSelectMajorGpas option:eq(0)").prop("selected", true);
// $("#MultiSelectMajorGpas option:eq(1)").prop("selected", true);
//}
});
我的列表框看起来像:
<select multiple id="MajorMultiSelects">
<option value="Criminal Justice">Criminal Justice</option>
<option value="Computer Science">Computer Science</option>
</select>
<select multiple id="MultiSelectMajorGpas">
<option value="4">4</option>
<option value="3.45">3.45</option>
</select>
解决方案
select 的 .val() 返回一个选定值的数组(如果选择了多个),因此您只需将父 select 的值分配给子 select 的值,如下所示:
$("#MajorMultiSelects").change(function() {
let i = 0;
$(this).find('option').each(function() {
$('#MultiSelectMajorGpas option:eq('+i+')').prop("selected", $(this).is(':selected'));
i++;
});
});
推荐阅读
- google-cloud-platform - 如何使用 terraform 停止 GCP 虚拟机实例
- node.js - 无法在 Heroku 上托管 MEAN 堆栈应用程序
- c++ - 重载 operator() 的左值解释
- css - 在上下文中将 CSS 变量相互关联
- python-3.x - 如何使用 k-means 算法对具有适当缩放两个轴的导入数据集进行聚类
- javascript - 如何从谷歌地图的“标记”点击中显示警报()?
- android - 菜单图标脱落
- php - 如何在 sql 运算符中使用 implode()?
- kubernetes - Istio 侧车注入
- rasa-nlu - 将 RASA 聊天机器人连接到 Twilo 的步骤