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, @linetemp.Length - 1), "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！就这样完成任务