MVC5用AJAX实现一个下拉列表的值改变，另一个下拉列表的值跟着变

本文实现在不更新整个页面的前提下，一个下拉列表的值改变，调用后台的函数获取另一个下拉列表的值，然后只更新另一个下拉列表的页面显示。

代码如下：

1、后台controller获取另一个下拉列表更新后的值的函数：

public JsonResult AJAXGetLineFromFactory(string factory)
{
GetLineFromFactory(factory);
return Json(ViewBag.allLineList,JsonRequestBehavior.AllowGet);
}

其中，ViewBag.allLineList里面是另一个下拉列表更新数据后的List<string>集合。

2、页面的下拉列表代码：

<span>Factory:&nbsp;</span>
<select name="factory" class="selectChange">
@if (@ViewBag.factory == "All")
{
<option value="All" selected="selected">All</option>
}
else
{
<option value="All">All</option>
}
@foreach (var factorytemp in @ViewBag.allFactory)
{
if (@ViewBag.factory == @factorytemp)
{
<option value=@factorytemp selected="selected">@factorytemp</option>
}
else
{
<option value=@factorytemp>@factorytemp</option>
}
}
</select>

<span>Line:&nbsp;</span>
<select name="line" class="valueChange">
@if (@ViewBag.line == "All")
{
<option value="All" selected="selected">All</option>
}
else
{
<option value="All">All</option>
}
@foreach (var linetemp in @ViewBag.allLineList)
{
if (@ViewBag.line == @linetemp)
{
<option value=@linetemp selected="selected">@linetemp.Replace(@linetemp.Substring(0,@linetemp.Length - 1),"Line ")</option>
}
else
{
<option value=@linetemp>@linetemp.Replace(@linetemp.Substring(0,"Line ")</option>
}
}
</select>

这里，有两个下拉列表factory和line。代码中类似@ViewBag.的部分都是后台传过来的值，这点相信会mvc的人都知道。

3、下面编写factory列表的值变化后，line列表显示的值的范围跟着变化，且不刷新整个网页：

<script type="text/javascript">

$(document).ready(function () {
$(".selectChange").change(function () {
$.ajax({
type: "POST",
url: "Home/AJAXGetLineFromFactory",
data: { factory: $(this).children("option:selected").val() },
dataType: "json",
success: function (data) {
$(".valueChange").empty();
if (data.length != 0) {
$("<option></option>")
.val("All")
.text("All")
.appendTo($(".valueChange"));
$.each(data,function (i,item) {
$("<option></option>")
.val(item)
.text(item.replace(item.substring(0,item.length -1),"Line "))
.appendTo($(".valueChange"));
});
}
}
});
});
});
</script>

其中，红色的部分是factory列表传给后台获取line列表更新值函数 AJAXGetLineFromFactory（）的参数，注意参数名称一致。

粉色背景部分说明一下，val(item)是下拉列表值的索引，text()里面是下拉列表显示的值。因为我的程序索引跟值要求一样，且只是string的集合，所以是这样写，这里可根据自己的实际需求改动。

OK！就这样完成任务

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!