c# - HTML Helpers DropDownList On change Jquery Event filter another DropDownList?附上 MVC 示例
问题描述
我有选择选项,例如,
<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”
希望您的建议
解决方案
两者this
都可能实际上是窗口引用;或者,在 DOM 加载时,上下文this
还不是下拉 ref。
所以手动,只需在加载 DOM 时触发 #CityId 元素上的 change() 事件:
$("#CityId").change(loadRegion).change(); // or .trigger('change');
可选地,只需使用 $.proxy 来更改函数运行的上下文:
$("#CityId").change(loadRegion);
$.proxy(loadRegion, $('#RegionSelect'))();
推荐阅读
- c - *scanf 中 %n 运算符的一致性和行为
- java - java-是否需要 revalidate() 方法?
- javascript - html value="" 不显示
- encryption-asymmetric - 您可以从 NCipher HSM 导出私钥并导入 Java 密钥库 (JCEKS)
- javascript - 使用 react-native 为 iPad/平板电脑启用横向模式
- linux - 我的 docker 镜像在我的驱动器上的哪个位置?(不在/下)
- android - threejs 压缩纹理 pc/mobile android/ios/chrome 兼容性
- java - 无法解析或不是类继承中的字段
- reactjs - 在将组件作为道具传递时,如何在 TypeScript(在 React 中)强制传递道具?
- regex - VSCode - 正则表达式字符集中的转义点