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

Posted 2023-05-09

【中文标题】HTML Helpers DropDownList On change Jquery Event filter another DropDownList？附上 MVC 示例

【英文标题】：HTML Helpers DropDownList On change Jquery Event filter another DropDownList? MVC Example attached

【发布时间】：2020-07-26 08:03:25

【问题描述】：

我有选择选项，例如，

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

希望您的建议

【参考方案1】：

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

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

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

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

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

【讨论】：

你能告诉我改变后我的功能是什么样子的吗