级联DropDown JQuery

时间:2017-01-24 09:38:42

标签: jquery asp.net-mvc

嗨请协助以下方面。我有一个下拉列表,其中填充了城镇,我创建了一个MVC项目,我有一个控制器操作,获取在第一个下拉列表中选择的城镇的郊区,但是我的代码似乎失败,请协助。见下面的代码。

控制器方法。

public JsonResult GetSurburbs(string id)
    {
        List<SelectListItem> states = new List<SelectListItem>();
        switch (id)
        {
            //Alberton surbubs
            case "1":
                states.Add(new SelectListItem { Text = "Select", Value = "0" });
                states.Add(new SelectListItem { Text = "ALBERANTE", Value = "1" });
                states.Add(new SelectListItem { Text = "ALBERTON", Value = "2" });
                states.Add(new SelectListItem { Text = "ALBERTSDAL", Value = "3" });
                states.Add(new SelectListItem { Text = "ALRODE", Value = "4" });
                states.Add(new SelectListItem { Text = "ALRODE SOUTH", Value = "5" });
                states.Add(new SelectListItem { Text = "ARTON", Value = "6" });
                states.Add(new SelectListItem { Text = "BASSONIA ROCK", Value = "7" });
                states.Add(new SelectListItem { Text = "BRACKENDOWNS", Value = "8" });
                states.Add(new SelectListItem { Text = "BRACKENHURST", Value = "9" });
                states.Add(new SelectListItem { Text = "EDEN PARK", Value = "10" });
                states.Add(new SelectListItem { Text = "EDEN PARK WEST", Value = "11" });
                states.Add(new SelectListItem { Text = "ELANDSFONTEIN 108-IR", Value = "12" });
                states.Add(new SelectListItem { Text = "FLORENTIA", Value = "13" });
                states.Add(new SelectListItem { Text = "GENERAAL ALBERTSPARK", Value = "14" });
                states.Add(new SelectListItem { Text = "GREENFIELDS", Value = "15" });
                states.Add(new SelectListItem { Text = "KLIPRIVIERSBERG 106-IR", Value = "16" });
                states.Add(new SelectListItem { Text = "KROMVLEI 142-IR", Value = "17" });
                states.Add(new SelectListItem { Text = "LINMEYER", Value = "18" });
                states.Add(new SelectListItem { Text = "MAYBERRY PARK", Value = "19" });
                states.Add(new SelectListItem { Text = "MAYRO PARK", Value = "20" });
                states.Add(new SelectListItem { Text = "MEYERSDAL", Value = "21" });
                states.Add(new SelectListItem { Text = "MEYERSDAL NATURE ESTATE", Value = "22" });
                states.Add(new SelectListItem { Text = "MPILISWENI", Value = "23" });
                states.Add(new SelectListItem { Text = "NEW MARKET AH", Value = "24" });
                states.Add(new SelectListItem { Text = "NEW MARKET MANOR", Value = "25" });
                states.Add(new SelectListItem { Text = "NEW MARKET PARK", Value = "26" });
                states.Add(new SelectListItem { Text = "NEW REDRUTH", Value = "27" });
                states.Add(new SelectListItem { Text = "OTHANDWENI", Value = "28" });
                states.Add(new SelectListItem { Text = "PALMIETFONTEIN 141-IR", Value = "29" });
                states.Add(new SelectListItem { Text = "PHOLA PARK", Value = "30" });
                states.Add(new SelectListItem { Text = "RACEVIEW", Value = "31" });
                states.Add(new SelectListItem { Text = "RANDHART", Value = "32" });
                states.Add(new SelectListItem { Text = "ROODEKOP 139-IR", Value = "33" });
                states.Add(new SelectListItem { Text = "ROOIKOP 140-IR", Value = "34" });
                states.Add(new SelectListItem { Text = "ROXTON", Value = "35" });
                states.Add(new SelectListItem { Text = "SOUTHCREST", Value = "36" });
                states.Add(new SelectListItem { Text = "SOUTHDOWNS", Value = "37" });
                states.Add(new SelectListItem { Text = "THINASONKE", Value = "38" });
                states.Add(new SelectListItem { Text = "THINTWA VILLAGE", Value = "39" });
                states.Add(new SelectListItem { Text = "TOKOZA", Value = "40" });
                states.Add(new SelectListItem { Text = "TOKOZA 198-IR", Value = "41" });
                states.Add(new SelectListItem { Text = "VERWOERDPARK", Value = "42" });
                states.Add(new SelectListItem { Text = "WATERVALSPRUIT", Value = "43" });
                states.Add(new SelectListItem { Text = "WATERVAL 150-IR", Value = "44" });
                states.Add(new SelectListItem { Text = "ZWARTKOPJES 143-IR", Value = "45" });
                break;

            //Bedfordview surbubs
            case "2":
                states.Add(new SelectListItem { Text = "Select", Value = "0" });
                states.Add(new SelectListItem { Text = "BEDFORD 62-IR", Value = "1" });
                states.Add(new SelectListItem { Text = "BEDFORD 68-IR", Value = "2" });
                states.Add(new SelectListItem { Text = "BEDFORD GARDENS", Value = "3" });
                states.Add(new SelectListItem { Text = "BEDFORD PARK", Value = "4" });
                states.Add(new SelectListItem { Text = "BEDFORDVIEW", Value = "5" });
                states.Add(new SelectListItem { Text = "ELANDSFONTEIN 90-IR", Value = "6" });
                states.Add(new SelectListItem { Text = "ESSEXWOLD", Value = "7" });
                states.Add(new SelectListItem { Text = "GELDENHUIS ESTATE SH", Value = "8" });
                states.Add(new SelectListItem { Text = "MALVERN EAST", Value = "9" });
                states.Add(new SelectListItem { Text = "MORNINGHILL", Value = "10" });
                states.Add(new SelectListItem { Text = "OOSPOORT", Value = "11" });
                states.Add(new SelectListItem { Text = "ORIEL", Value = "12" });
                states.Add(new SelectListItem { Text = "SENDERWOOD", Value = "13" });
                states.Add(new SelectListItem { Text = "ST ANDREWS", Value = "14" });
                break;

            //Benoni surbubs
            case "3":
         //    break;

        }
        return Json(new SelectList(states, "Value", "Text"), JsonRequestBehavior.AllowGet);
    }

以下是我对dropdpnws

的html助手的看法
<div class="form-group">
                                            @Html.LabelFor(m => m.Town, new { @class = "col-md-2 control-label" })
                                            <div class="col-md-10">
                                                @*@Html.DropDownListFor(model => model.Town, new SelectList(new string[] { "Alberton", "Bedfordview", "Benoni", "Boksburg", "Brakpan", "Edenvale", "Germiston", "Isando", "OR Tambo Airport", "Kempton Park", "Nigel", "OR Tambo International", "Springs" }))*@
                                                @Html.DropDownList("Town", new SelectList(new string[] { "Alberton", "Bedfordview", "Benoni", "Boksburg", "Brakpan", "Edenvale", "Germiston", "Isando", "OR Tambo Airport", "Kempton Park", "Nigel", "OR Tambo International", "Springs" }))
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            @Html.Label("Surburb", new { @class = "col-md-2 control-label" })
                                            <div class="col-md-10">
                                                @Html.DropDownList("Surburb", new SelectList(string.Empty, "Value", "Text"), "Please select a Surburb", new { style = "width:250px", @class = "dropdown1" })
                                            </div>
                                        </div>

这是我的Jquery代码来填充数据。

<script type="text/javascript">

    $(document).ready(function () {
        //Dropdownlist Selectedchange event
        $("#Town").change(function () {
            $("#Surburb").empty();
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetSurburbs")', // we are calling json method

                dataType: 'json',

                data: { id: $("#Town").val() },
                // here we are get value of selected country and passing same value


                success: function (states) {
                    // states contains the JSON formatted list
                    // of states passed from the controller

                    $.each(states, function (i, state) {
                        $("#Surburb").append('<option value="' + state.Value + '">' +
                         state.Text + '</option>');
                        // here we are adding option for States

                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve Surburbs.' + ex);
                }
            });
            return false;
        })
    });

代码失败,Jquery,Failed rto retrive Suburbs中有例外,请帮助我。

1 个答案:

答案 0 :(得分:0)

也许您需要将id放入网址:

 url: '@(Url.Action("GetSurburbs"))?id=' + $("#Town").val(), 

您的浏览器的F12开发者工具会有所帮助。它显示来自服务器的请求和响应,因此您可以看到正在发生的事情。