Question

我有2个选择选项，我正在填充数据库中的值现在我如何根据MVC 4剃刀语法中的第一个选择选项更新第二个选择选项我不知道我试过我是mvc开发的新手，我只需要一个线索

            $("#selectTown").change(function () {

            if ($(this).data('options') == undefined) {

                $(this).data('options', $('#selectstreet option').clone());
            }
            var id = $(this).val();
            var options = $(this).data('options').filter('[value=' + id + ']');
            $('#selectstreet').html(options);
        });

我尝试上面的jquery并且它的工作如果值是静态的但现在不工作，因为我从数据库获取值。任何的想法？提前致谢

Answer 1

以下是国家和城市的级联下拉列表的一般解决方案，它可以以相同的方式为任何其他方案实施

我有一个班级城市

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CascadeDropdownLists.Models
{
public class City
{

    public City()
    { }

    public City(int id, string name)
    {
        this.Id = id;
        this.Name = name;
    }

    public int Id { get; set; }
    public string Name { get; set; }
}
}

然后我有HomeController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CascadeDropdownLists.Models;

namespace CascadeDropdownLists.Controllers
{
public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetCities(int id)
    {
       // List<Models.City> cities = new List<Models.City>();

        List<City> cities = new List<City>();

        if (id == 1)
        {
            cities.Add(new City(1, "Lahore"));
            cities.Add(new City(2, "Islamabad"));
        }
        else {
            cities.Add(new City(1, "Paris"));
            cities.Add(new City(2, "Alaska"));

        }
        return this.Json(cities,JsonRequestBehavior.AllowGet);
    }

}
}

最后在index.cshtml文件中

@{
Layout = null;
 }

 <!DOCTYPE html>

 <html>
 <head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
 @Scripts.Render("~/bundles/jquery")
 <script type="text/javascript">
     $(document).ready(function () {
         $("#countrySelector").change(function () {
             var countryId = $("#countrySelector").val(); 
             $("#citySelctor option").remove();
             $.getJSON("/home/GetCities?id=" + countryId, function (data) {
                 $("#citySelctor").append('<option>-Select City-</option>');
                 $.each(data, function (i, item) {
                     $("#citySelctor").append('<option value=' + item.Id + '>' + item.Name + '</option>');
                     //alert('Id = ' + item.Id + " Name = " + item.Name);
                 });

             });

         });

     });

＆＃13;

<body>
       <div>
       <div>
       <select id="countrySelector">
       <option value="0">-Select Country-</option>
       <option value="1">Pakistan</option>
       <option value="2">France</option>
  
        </select>
        <div>
        <select id="citySelctor">
        <option>-Select City-</option>
      
        </select>
        </div>
        </div>
       </div>
</body>

＆＃13;

在第一个选择选项MVC 4 razor的基础上更新第二个选择选项

1 个答案: