HTML Helpers DropDownList On change Jquery Event filter another DropDownList？附上 MVC 示例

Question

我有选择选项，例如，

   <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();
            }
        });
    }

我收到了这个错误，

未捕获的类型错误：无法读取未定义的属性“toLowerCase”

希望您的建议

Answer 1

this 可能实际上是一个窗口引用；或者，在 DOM 加载时，this 的上下文还不是下拉引用。

所以手动，只需在加载 DOM 时触发 #CityId 元素上的 change() 事件：

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

可选地，只需使用 $.proxy 来更改函数运行的上下文：

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