Question

我一直在努力争取这一天。仍然无法解决它，它应该是简单的东西。我有2个下拉菜单，国家和城市。选择国家/地区后，我想在数据库中显示该国家/地区的可用城市。但是下拉列表中填充了一个包含文本未定义的大项目列表，正如我选中的那样正确地返回了id，并且值是正确的id。我也看了Json filling dropdown with undefined，但似乎没有帮助，所以在这里我留下我的代码片段，看看有人能发现我不能发现的东西。

HomeController.cs

public class HomeController : BaseController
    {
        private XecuDateDevEntities db = new XecuDateDevEntities();
        List<SelectListItem> country = new List<SelectListItem>();
        List<SelectListItem> _city = new List<SelectListItem>();

        public ActionResult Index()
        {

            ViewBag.var1 = GetCountries();
            ViewBag.var2 = _city;
            return View();
        }

        private SelectList GetCountries()
        {

            foreach (Country c in db.Countries)
            {
                country.Add(new SelectListItem { Text = c.Country1, Value = c.IDCountry.ToString() });
            }
            return new SelectList(country, "Value", "Text", "id");

        }

        public JsonResult GetCities(string id)
        {
            foreach (City c in db.Cities.Where( x=> x.IDCountry.ToString() == id))
            {
                _city.Add(new SelectListItem { Text = c.City1, Value = c.IDCity.ToString() });
            } 
            return Json(_city, JsonRequestBehavior.AllowGet);

        }
    }

Index.cshtml

<h2>Index</h2>
Country    @Html.DropDownList("var1", "Choose Country")
City       @Html.DropDownList("var2", "Choose City")
@section scripts
{
    <script type="text/javascript">
        function myFunction() {
            var id = $("#var1 :selected").val();
            var url = "Home/GetCities";
            var data1 = { "id": id };
            $.post(url, data1, function (data) {
                var items = [];
                items.push("<option value=" + 0 + ">" + "Choose City" + "</option>");
                for (var i = 0; i < data.length; i++) {

                    items.push("<option value=" + data[i].Value + ">" + data[i].Text + "</option>");
                }
                $("#var2").html(items.join(' '));
            });
        }

        $("#var1").change(myFunction);


    </script>
}

感谢!!!!

Answer 1

您可以使用此方法：

<强>控制器：

jsonReader

查看：

<html> <head> <style> label strong {display: inline-block; width: 150px; text-align: left; margin: 0 0 10px;} </style> </head> <body> <center> <div id="Holder" style="width:50%;"> <div id="L_div" style="float:left;"> <div id="container" align="center"> <div id="name"> <label> <strong>Name:</strong> <input id="name_text" type="text" /> </label> </div> <div id="email"> <label> <strong>Email Address:</strong> <input id="email_text" type="text" /> </label> </div> </div> </div> <div id="R_div" style="float:right;"> <div id="nickname"> <label> <strong>Nickname:</strong> <input id="nickname_text" type="text" /> </label> </div> <div id="school"> <label> <strong>School:</strong> <input id="school_text" type="text" /> </label> </div> </div> </div> </div> </center> </body> </html>

Json用undefined填充我动态填充的下拉列表

1 个答案: