[英]How to filter One select based on Another select drop down jquery MVC?
I have two select in view filling through ViewData that are,我有两个选择通过 ViewData 填充视图,
In view,在看来,
@{
IEnumerable<Region> region = ViewData["regions"] as IEnumerable<Region>;
IEnumerable<City> city = ViewData["cities"] as IEnumerable<City>;
}
<tfoot>
<tr>
<td><input type="text" id="txtTribeName" /></td>
<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 id="ddlcity" name="CityId">
<option value="0">Select City</option>
@foreach (City re in city)
{
<option value="@re.CityID">@re.CityName</option>
}
</select>
</td>
@*<td>@Html.dropDropDownListFor(ViewData["regions"] as IEnumerable<SelectListItem>)</td>*@
<td><input type="button" id="btnAdd" value="Add" /></td>
</tr>
</tfoot>
my script is like,我的脚本就像,
$("body").on("change", "#ddlregion", function () {
});
In script using IEnumerable<City> city
can i sort it according to region在使用IEnumerable<City> city
脚本中,我可以根据地区对其进行排序吗
Hopes for suggestions.希望给点建议。
Edit:编辑:
my controller passing region and city from Ef like,我的控制器从 Ef 传递区域和城市,例如,
TribeEntities Db = new TribeEntities();
ViewData["regions"] = Db.Regions;
ViewData["cities"] = Db.Cities;
In your City dropdown, we need to add a data-attribute.在您的城市下拉菜单中,我们需要添加一个数据属性。 I used data-region
.我使用了data-region
。 Use this as your City dropdown;将此用作您的城市下拉菜单;
<select 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>
Then, we need to loop through the options of City dropdown and show/hide them accordingly.然后,我们需要遍历 City 下拉列表的选项并相应地显示/隐藏它们。 Your script should be like;你的脚本应该是这样的;
$(document).on("change", "#ddlregion", function() {
var selectedRegion = $(this).val();
$("#ddlcity").find("option").each(function() {
if ($(this).data("region") == selectedRegion) {
$(this).show();
} else {
$(this).hide();
}
});
});
See static demo below;见下面的静态演示;
$(document).on("change", "#ddlregion", function() { var selectedRegion = $(this).val(); $("#ddlcity").find("option").each(function() { if ($(this).data("region") == selectedRegion) { $(this).show(); } else { $(this).hide(); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="ddlregion" name="RegionId"> <option value="0">Select Region</option> <option value="1">Region 1</option> <option value="2">Region 2</option> <option value="3">Region 3</option> </select> <select id="ddlcity" name="CityId"> <option data-region="0">Select City</option> <option data-region="1">City 1 in Region 1</option> <option data-region="1">City 2 in Region 1</option> <option data-region="2">City 1 in Region 2</option> <option data-region="3">City 1 in Region 1</option> <option data-region="3">City 2 in Region 2</option> <option data-region="3">City 3 in Region 3</option> <option data-region="3">City 4 in Region 4</option> </select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.