页面效果图：

数据库表结构：

首先在数据库中创建省级、城市的表，我的表如下：我用了一张表放下了省级、城市的数据，用level划分省份和城市，parentId表示该城市所在省份的id

主要文件有：index.cshtml，ErJLDController.cs ，数据处理层，业务处理层，还有数据库文件 。

index.cshtml：

 <body>

     <div>

         <select id="provinceId" >

          <option> 请选择省份</option>

         </select>

         <select id="cityId">

             <option>请选择市区</option>

         </select>

     </div>

     <script type="text/javascript">

         //用json从数据库里取一级列表的参数

         $(function () {

             $.getJSON("ErJLD/getProvince/", function (obj) {

                 $.each(obj, function (i, p) {

                     $("#provinceId").append("<option value='"+p.id+"'>" + p.areaValue + "</option>");

                 });

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

                     //用attr（）方法获取当前选择的option的value值（即p.id ,数据库里的id值，

                     //虽然在TestController中的getCity方法中传入的是string类型的形参，但是后来需要变换成int类型, 所以value值应该为数字）

                     var pName = $("#provinceId").attr("value");

                     $.getJSON("ErJLD/getCity?pName=" + pName, getcity);

                 });

             });

         });

         function getcity(obj) {

             $("#cityId").empty();

                         $.each(obj, function (m, v) {

                             $("#cityId").append("<option >" + v.areaValue + "</option>");

                         });

                     };

     </script>

 </body>

 Index.cshtml

ErJLDController.cs

 namespace Mvcproject.Controllers

 {

     //二级联动

     public class ErJLDController : Controller

     {

         ZjbEntities db = new ZjbEntities();

         //

         // GET: /Test/

         public ActionResult Index()

         {

             //pro_city province=new pro_city();

             return View();

         }

         public JsonResult getProvince() {

             List<pro_city> provinceList = (from p in db.pro_city where p.level ==  select p).ToList();

             JsonResult Jprovince = new JsonResult();

             Jprovince.Data = provinceList;

             Jprovince.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

             return Jprovince;

         }

         public JsonResult getCity(string pName)

         {

             //string pid = (from p in db.pro_city where p.areaValue == pName select p.id).ToString();

             //int id = int.Parse(pid);

             int id = int.Parse(pName);

             List<pro_city> cityList = (from p in db.pro_city where p.parentId == id select p).ToList();

             JsonResult Jcity = new JsonResult();

             Jcity.Data = cityList;

             Jcity.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

             return Jcity;

         }

     }

 }

 ErJLDController.cs

asp.net mvc jQuery 城市二级联动的更多相关文章

  1. jq简单城市二级联动实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建

    上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...

  3. js实现城市二级联动列表

    这个是一个同事写的,我看着有用,就cv下来了. 程序功能主要逻辑是: 1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏 2.一级标签选中城市时,二级标签显示在页面,并列出响应市区 3.当 ...

  4. jQuery下拉列表二级联动插件

    jQuery下拉列表二级联动插件的视图代码: <!doctype html> <html lang="en"> <head> <meta ...

  5. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

    上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...

  6. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作

    /****** Object: 新闻表 Script Date: 2017/9/2 星期六 15:11:12 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENT ...

  7. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  8. jquery 城市三级联动

    js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...

  9. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

随机推荐

  1. JSONObject和JSONArray的关系

    JSON字符串的最上一层,肯定是一个JSONObject,JSONObject的下一层,可以包含JSONArray,JSONArray又包含了若干个JSONObject.用例子来说明: package ...

  2. error: Error retrieving parent for item: No resource found that matches the given name 'Theme.AppCompat.Light'.

    error: Error retrieving parent for item: No resource found that matches the given name 'Theme.AppCom ...

  3. jvm运行数据分布

    本人看的深入理解jvm(该版本的java se7) java运行时数据区域 Java虚拟机在执行java程序时,把内存划分为几个不同的阶段,存在不同的存在时间.不同的用途 先上图 程序计数器:是jvm ...

  4. 为友盟消息推送开发的PHP SDK（composer版）：可以按省发Android push

    一直以来APP希望按省市县推送Android push,只能自己分析用户经纬度,打tag发送. 现在终于有服务商提供了. 友盟消息推送 可以“按省推送”,很方便. 我为友盟做了PHP SDK(comp ...

  5. javascript 异步模块加载 简易实现

    在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AM ...

  6. css的四种隐藏方式

    1.opacity:0只是把元素隐藏起来了 ,但是还是占有布局,所以还是对布局有影响 <div class="div1"> snda:opacity:0只是把元素隐藏起 ...

  7. textillate.js 文字动画

    textillate.js是一款强大的文字插件,若配合animate.css.fittext.lettering一起使用,这样做出来的文字特效很完美. 在线实例 实例演示 使用方法 <div i ...

  8. JavaScriptOO.com – 快速找到你需要的 JS 框架

    JavaScriptOO.com 集合了目前 Web 开发中最常用的422(截至目前)款 JavaScript 框架,你可以根据功能类别(Ajax,动画,图表,游戏等)进行过滤和排序,快速找到你需要的 ...

  9. JavaScript技巧[转载]

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  10. [ javascript canvas 插件演示 ] canvas 插件演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...