Желание установить DropDownListA обратно к значению по умолчанию, когда выбор сделан в DropDownListB

Question

Я работаю над созданием веб-приложения для решения некоторых внутренних задач, и мне нужны различные варианты фильтров. У меня есть два раскрывающихся списка, но у меня возникают трудности с фильтрацией по одному или другому. Фильтрация одного работает нормально, но если я хочу фильтровать по другому, я бы хотел сбросить значение фильтра для первого.

В настоящее время похоже, что он пытается отфильтровать по обоим одновременно, если только значение не установлено вручную. Я заполняю эти значения из запроса к базе данных в моем контроллере, и это работает правильно. Я действительно не знаком с javascript или jquery, и не уверен, что мне придется начинать изучать этот маршрут, когда я углублюсь в подобные проекты.

<label>Filter by Customer: &nbsp;</label>
    @Html.DropDownListFor(f => f.SelectedCustomerName, Model.CustomerNames, "All", new { onchange = "this.form.submit();" })
    <label>Filter by Office: &nbsp;</label>
    @Html.DropDownListFor(f => f.SelectedOffice, Model.OfficeNames, "All", new { onchange = "this.form.submit();" })

Answer 1

вы можете сделать это через JS, например:

 $(document).ready(function myFunction() {
        $("#customerDropDown").change(function () {
            $("#officeDropDown").val('');
        });
        $("#officeDropDown").change(function () {
            $("#customerDropDown").val('');

        });
    });

или попробуйте это ..

$(document).ready(function myFunction() {
        $("#customerDropDown").change(function () {
            $("#officeDropDown").text('');
        });
        $("#officeDropDown").change(function () {
            $("#customerDropDown").text('');
        });
    });

Answer 2

Мне удалось это исправить, добавив функцию и вызвав ее из события onchange.

<script>
    $(document).ready(function myFunction() {
        $("#customerDropDown").change(function () {
            $("#officeDropDown").val("All");
        });
        $("#officeDropDown").change(function () {
            $("#customerDropDown").val("All");
        });
    });
</script>

<label>Filter by Customer: &nbsp;</label>
    @Html.DropDownListFor(f => f.SelectedCustomerName, Model.CustomerNames, "All", new { onchange = "this.form.submit();myFunction();", @id = "customerDropDown" })
    <label>Filter by Office: &nbsp;</label>
    @Html.DropDownListFor(f => f.SelectedOffice, Model.OfficeNames, "All", new { onchange = "this.form.submit();myFunction();", @id = "officeDropDown" })