ASP. net бритвенные страницы и множественный выбор, размещение всех элементов в выбранном - PullRequest
Новая
       6

ASP. net бритвенные страницы и множественный выбор, размещение всех элементов в выбранном

1 голос
/ 02 апреля 2020

У меня есть форма, которая имеет два выбора, один слева, один справа. Один слева для перечисления элементов, которые нужно добавить, две кнопки, одну для добавления и одну для удаления элементов, для выбора выберите бит jQuery. Оба выбора имеют атрибуты multiple="multiple".

Проблема в том, что когда я отправляю форму, в данных формы публикуются только те элементы, которые были выбраны справа, что ожидается. Я добавил следующий бит jQuery, чтобы выбрать все элементы в списке выбора при отправке, но он по-прежнему отправляет данные только одного выбранного элемента до нажатия кнопки отправки: 

$("#pageForm").submit(function (e) {
     $("#controlGradesList option").prop("selected", "selected");
});

Это моя разметка формы: 

<form method="post" id="pageForm">

    @Html.HiddenFor(x => x.Data.Ref)

    <div class="row">
        <div class="col-sm-5">
            <h3>All grades</h3>
            <div class="form-group">
                <input type="text" id="filterBox" class="form-control" placeholder="Filter grades" />
            </div>
            <div class="form-group">
                <select class="form-control" size="20" multiple="multiple" id="gradesList" asp-items="@(new SelectList(Model.Data.AvailableGrades, "Ref", "Display"))">
                </select>
            </div>
        </div>

        <div class="col-sm-2">
            <div class="push-down-arrows">
                <div class="form-group">
                    <input type="button" class="btn btn-primary btn-block" id="addButton" value=">>" title="Add grade to control group" />
                </div>
                <div class="form-group">
                    <input type="button" class="btn btn-primary btn-block" id="removeButton" value="<<" title="Remove grade from control group" />
                </div>
            </div>
        </div>

        <div class="col-sm-5">
            <h3>Associated grades</h3>
            <div class="grades-padding-top">
                <div class="form-group">
                    <select class="form-control" size="20" multiple="multiple" id="controlGradesList" asp-for="Data.AssociatedGradeRefs" asp-items="@(new SelectList(Model.Data.AssociatedGrades, "Ref", "Display"))">
                    </select>
                </div>
            </div>
        </div>

    </div>

    <hr />

    <button class="btn btn-primary" type="submit"><i class="fa fa-save">&nbsp;</i>Save</button>
    | <a href="#" onclick="window.history.go(-1);">Back to previous page</a>

</form>

Что мне здесь не хватает?

1 Ответ

2 голосов
/ 02 апреля 2020

Мне нужно было использовать событие onclick на кнопке, чтобы выбрать все опции выбора, запретить использование по умолчанию и отправить форму: 

<button class="btn btn-primary" type="submit" onclick="submitForm(event)"><i class="fa fa-save">&nbsp;</i>Save</button>

и 

function submitForm(e) {
    $("#controlGradesList option").prop("selected", true);
    e.preventDefault();
    $('#pageForm')[0].submit();
}
...