HTML Помощники DropDownList При изменении Jquery Фильтр событий еще один DropDownList? MVC Пример прилагается - PullRequest
Новая
       44

HTML Помощники DropDownList При изменении Jquery Фильтр событий еще один DropDownList? MVC Пример прилагается

0 голосов
/ 13 апреля 2020

У меня есть опция выбора, как, 

   <td>
                    <select id="ddlregion" name="RegionId">
                        <option value="0">Select Region</option>
                        @foreach (Region re in region)
                        {
                            <option value="@re.RegionID">@re.RegionName</option>
                        }
                    </select>
                </td>
                <td>
                    <select disabled id="ddlcity" name="CityId">
                        <option value="0">Select City</option>
                        @foreach (City re in city)
                        {
                            <option data-region="@re.RegionID" value="@re.CityID">@re.CityName</option>
                        }
                    </select>
                </td>

Onchange Я вызываю метод, 

$("body").on("change", "#ddlregion", function () {
    var selectedRegion = $(this).val();
    $('#ddlcity').prop('disabled', false);
    $("#ddlcity").find("option").each(function () {
        if ($(this).data("region") == selectedRegion) {
            $(this).show();

        } else {
            $(this).hide();
        }
    });
});

Он работает нормально.

Теперь я пытаюсь использовать тот же подход в HTML помощниках DropDownList, 

   <div class="form-group">
            @Html.LabelFor(model => model.RegionId, "RegionId", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("RegionId", null, new { @class = "form-control"})
                @Html.ValidationMessageFor(model => model.RegionId, "", new { @class = "text-danger" })
            </div>
        </div>

 <div class="form-group">
            @Html.LabelFor(model => model.CityId, "CityId", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("CityId", null, htmlAttributes: new { @class = "form-control", @data_region="RegionId" })
                @Html.ValidationMessageFor(model => model.CityId, "", new { @class = "text-danger" })
            </div>
        </div>




 $("body").on("change", "#RegionId", function () {
        var selectedRegion = $(this).val();
        alert("test");
        $('#CityId').prop('disabled', false);
        $("#CityId").find("option").each(function () {
            if ($(this).data("region") == selectedRegion) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });

using above script it not not calling on change.

, чем я делаю изменения в раскрывающемся списке регионов и меняю скрипт следующим образом, 

@Html.DropDownList("RegionId", null, new { @class = "form-control",onchange="callChangefunc(this.value)"})

   function callChangefunc(val) {
        var selectedRegion = $(this).val();
        alert("test");
        $('#CityId').prop('disabled', false);
        $("#CityId").find("option").each(function () {
            if ($(this).data("region") == selectedRegion) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }

Здесь я получаю эту ошибку,

Uncaught TypeError: Невозможно прочитать свойство 'toLowerCase' из неопределенного

Надежды на ваши предложения

1 Ответ

0 голосов
/ 14 апреля 2020

Либо this может быть ссылкой на окно; или, при загрузке DOM, контекст this еще не будет раскрывающимся ссылочным номером.

Поэтому вручную просто вызовите событие change () для элемента #CityId при загрузке DOM: 

$("#CityId").change(loadRegion).change(); // or .trigger('change');

При желании просто используйте $ .proxy, чтобы изменить контекст, в котором работает функция: 

$("#CityId").change(loadRegion);
$.proxy(loadRegion, $('#RegionSelect'))();
...