MVC DropDownLis 二级联动实现

转自:https://bbs.csdn.net/topics/370096159

二级联动:

View: 

<script type="text/javascript">    

    $(function () {       

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

            $("#drpCity").get(0).options.length = 0; //清空

            $.getJSON("/Persons/GetCities/" + $(this).val(), null , function (data) {

                $.each(data, function (i, item) {

                    $("<option></option>").val(item["ID"]).text(item["CityName"]).appendTo($("#drpCity"));

                });

            });

        });

    });

</script>

@Html.DropDownList("drpProvince",null,"请选择")

@Html.DropDownList("drpCity"null,"请选择")

Action:

          public ActionResult Create()

        

            List<Provinces> list = db.Provices.ToList();

            ViewData["drpProvince"] = new SelectList(list, "ID""ProvinceName");

            ViewData["drpCity"] = new List<SelectListItem>();

            return View();

        }

        //返回城市列表

        public ActionResult GetCities(int? id)

        {

            List<Cities> list = db.Cities.Where(q => q.ProvincesID == id).ToList();

            if (Request.IsAjaxRequest())

            {

                return Json(list, JsonRequestBehavior.AllowGet);

            }

            else

            {

                return View("");

            }

        

原文地址:https://www.cnblogs.com/wangdongying/p/11378723.html

时间: 2025-01-18 00:18:15

MVC DropDownLis 二级联动实现的相关文章

Spring MVC中Ajax实现二级联动

今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody public Map<String,Object> faultType(int id,HttpServletRequest request)throws IOException { String ReturnMessage = ""; //获取所有子类故障类型 List<F

Ajax实现的城市二级联动二

上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option>请选择</option> </select> <select id="city"> <option>请选择</option> </select> 2.JS /* * 省份信息和城市信息全部来源于服务器端 * * 第一

ajax实现二级联动

用js实现简单的ajax二级联动(如上图) HTML代码: 1 省份:<select id="province" onchange="getCity();" > 2 <option>请选择--</option> 3 </select> 4 城市:<select id="city"> 5 <option>请选择--</option> 6 </select>

二级联动列表

<!DOCTYPE HTML><html><head><title>二级联动列表</title><meta charset="utf-8" /><style> .hide{ display: none; }</style><script> /*实现“省”和“市”的级联下拉列表*/ var cities=[[], /*0号下标没有元素*/[{"name":'东城

JS实现省市二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF

Query实例的ajax应用之二级联动的后台是采用php来做的

jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动数据库表设计 csj_trade id int(11) auto_increment          tname varchar(100)tradeType int(11) 其中,id为主键自动索引,tname为行业名称,tradeType为一个标识,为0时,表示这条数据是大类:不为0,而是某个数字的时候,则这个数字表示其父级的id.(1)主页面 <script type="t

(实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术   程序开发   数据库   小类: 实现的效果就是当选择大类时,小类下拉框里的选项内容也随着改变.实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理. XHTML 首先我们要建立两个下拉选择框,第一个是大类

jQuery二级联动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级联动</title> <script src="js/jquery-1.7.1.js"></script> <style> </style> <script type="

JavaScript省市二级联动

cities.xml <?xml version="1.0" encoding="GB2312"?> <china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通