例如:
下拉菜单 A 列出了动物类型:哺乳动物、爬行动物、鱼类。 然后下拉菜单 B 将列出可用于所选类型的动物。 如果您选择哺乳动物,则下拉菜单 B 将显示:猫、狗、马。
这称为条件下拉列表或级联下拉列表。
最佳答案
所以我了解到动态行为,即与服务器交互而不重新加载页面的意义上,需要使用 javascript。这是我的解决方案,它是由多个示例和教程拼凑而成的:
型号:
public class MyModel
{
public string IndependentProperty { get; set; }
public string DependentProperty { get; set; }
}
View 模型:
public class MyViewModel
{
public MyModel Model { get; set; }
public IEnumerable<SelectListItem> IndependentOptions { get; set; }
}
查看:
@using MyViewModel
<form method="post">
<select id="independentOption"
asp-for="Model.IndependentProperty"
asp-items="Model.IndependentOptions"
onchange="updateDependentOptions()">
<option value="" selected="true">Select</option>
</select>
<select id="dependentOption"
asp-for="Model.DependentProperty">
<option value="" selected="true">Select</option>
</select>
</form>
<script type="text/javascript">
function updateDependentOptions() {
var independentOption = $('#independentOption').val();
ajaxCall(
'/MyController/GetDependentOptions?independentOption=',
independentOption
).done(
function (response) {
$('#dependentOption').empty();
if (response.length > 0) {
var options = '';
for (var i = 0; i < response.length; i++) {
options += '<option value="'
+ response[i] + '">' + response[i] + '</option>';
}
$('#dependentOption').append(options);
}
}
);
}
function ajaxCall(url, data) {
return $.ajax({
url: url + data,
data: '',
type: 'GET',
contentType: 'application/json; charset=utf-8'
});
}
</script>
Controller :
[HttpGet]
public ActionResult Index()
{
// populate the viewmodel
return View(viewmodel);
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
// Use model binding to
// get user input.
// Then save the changes.
// Return some action
}
[HttpGet]
public JsonResult GetDependentOptions(string independentOption)
{
var result = new List<string>();
result.Add("Select"); // optional
// logic to populate the dependent dropdown
// based on the choice made in the independent
// dropdown.
return Json(result);
}
关于javascript - 如何根据 ASP.NET Core MVC 中不同下拉菜单中的用户选择填充下拉菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60236785/