jQuery多选另一个自动多选答案

【问题标题】：jQuery multiselect another multiselect automaticallyjQuery多选另一个自动多选
【发布时间】：2019-11-05 15:36:24
【问题描述】：

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

【问题讨论】：

标签： jquery listbox multi-select

【解决方案1】：

选择的 .val() 返回一个选定值的数组（如果选择了多个），因此您只需将父选择的值分配给子选择的值，如下所示：

$("#MajorMultiSelects").change(function() {
  let i = 0;
  $(this).find('option').each(function() {    
    $('#MultiSelectMajorGpas option:eq('+i+')').prop("selected", $(this).is(':selected'));    
    i++;
  });
});

Here is an updated example fiddle.

【讨论】：

这对我不起作用。我添加了一个 listboxfors 可能包含的示例。
您在两个选择框中都有完全不同的值和文本，并且真的想匹配索引（不是文本，不是值）。我会尽快更新答案。
我已经根据您的反馈和测试用例更新了我的答案和小提琴。