JQuery множественный выбор другого множественного выбора автоматически - PullRequest
Новая
       13

JQuery множественный выбор другого множественного выбора автоматически

0 голосов
/ 05 ноября 2019

У меня есть 2 списка. Когда я делаю выбор в первом списке, мне нужно, чтобы он автоматически выбирал соответствующую опцию в последующих списках. Если я выбираю отдельные предметы (дети), я получаю нужный мне результат. Проблема, с которой я сталкиваюсь, заключается в том, что если я выбираю оба элемента (дочерние), я не получаю оба элемента, выбранных в последующих списках для. Ниже приведены мои списки выбора. 

@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>

1 Ответ

1 голос
/ 05 ноября 2019

.val () объекта select возвращает массив выбранных значений (если выбрано несколько), поэтому все, что вам нужно, это присвоить значение parent select значению child select следующим образом: 

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

Вот обновленная примерная скрипка.

...