MVC 二级联动

时间:2022-03-05 07:36:38

后台代码,获取数据如下:

/// <summary>
/// 获取省份
/// </summary>
public JsonResult GetProvincelist()
{
return Json(db.Province.ToList(),JsonRequestBehavior.AllowGet);
}
/// <summary>
/// 获取城市
/// </summary>
/// <param name="pid"></param>
/// <returns></returns>
public JsonResult GetCitylist(int pid)
{
List<CityModel> list=db.City.Where(c => c.Province.PID == pid).ToList();
List<SelectListItem> item = new List<SelectListItem>();
foreach (var City in list)
{
item.Add(new SelectListItem { Text = City.CityName, Value = City.CID.ToString() });
}
return Json(item, JsonRequestBehavior.AllowGet);
}

定义两个下拉框:

<span>省份:</span>
<select id="Province" >
<option>请选择</option>
</select> <span>市:</span>
<select id="City">
<option>请选择</option>
</select>

使用jquery获取控制器里返回的值加载到下拉框中:

<script type="text/javascript">
$(function () {
GetProvince(); //加载省份
$("#Province").change(function () {
GetCity();
});
});
function GetProvince() {
// $("#Province").empty();
$.getJSON(
"/Home/GetProvincelist",
function (data) {
alert(data);
$.each(data, function (i, item) {
$("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province"));
})
});
// GetCity();
}
function GetCity() {
$("#City").empty();
$.getJSON(
"/Home/GetCitylist",
{ pid: $("#Province").val() },
function (data) {
$.each(data, function (i, item) {
$("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City")); })
});
}
</script>

→原文链接←

MVC 二级联动的更多相关文章

  1. MVC二级联动使用&dollar;&period;ajax方法获取后端返回的字符串

    在"MVC二级联动使用$.getJSON方法"中使用$.getJSON()获取后端返回的JSon. 本篇使用jQuery的$.ajax()获取后端返回的字符串,实现二级联动.   ...

  2. MVC二级联动使用&dollar;&period;getJSON方法

    本篇使用jQuery的$.getJSON()实现二级联动.   □ View Models 1: namespace MvcApplication1.Models 2: { 3: public cla ...

  3. MVC 二级联动 可以试试

    后台代码,获取数据如下: /// <summary> 2 /// 获取省份 3 /// </summary> 4 public JsonResult GetProvinceli ...

  4. asp&period;net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  5. Spring MVC中Ajax实现二级联动

    今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody p ...

  6. C&num; MVC LayUI实现下拉框二级联动

    一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...

  7. Javascript中二级联动

    主要使用到到了地址JSON格式,来做,没有涉及数据库的读取. <!DOCTYPE html><html><head> <meta charset=" ...

  8. JavaScript日历控件开发 C&num; 读取 appconfig文件配置数据库连接字符串,和配置文件 List&lt&semi;T&gt&semi;&period;ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp&period;net core导入excel 一个二级联动

    JavaScript日历控件开发   概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...

  9. iOS开发之&quot&semi;省市&quot&semi;二级联动的数据组织&lpar;PHP版&rpar;以及PickerView的实现与封装

    之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...

随机推荐

  1. ios基础篇(二十八)—— UITableView的上拉加载

    本文主要展示一个demo实现UITableView的上拉加载数据: 先看看效果图: 接着上拉,加载更多数据: 主要实现的效果是在我们上拉结束拖拽之后,开始加载数据,数据加载的过程中有滚动轮提示用户正在 ...

  2. Java中静态内部类的理解

    class A { public void func() { A a=new A(); C c=a.new C(); } public static void main(String[] args) ...

  3. python脚本利用windows计划定时执行

  4. ajax练习习题二三级联动

    异步执行 1数据传输收发数据的时候不用等待对方接受,可以继续发送 2Ajax 在调用处理页面处理数据的时候,下面的代码可以继续执行,效率高 同步执行 1收发数据的时候要等到对方接受的成功,才可以继续发 ...

  5. ASP连接11种数据库的常用语法

    1.Access数据库的DSN-less连接方法: 以下为引用的内容: set adocon=Server.Createobject("adodb.connection") ado ...

  6. jsp js java

    Java技术 J a v a是一种 简单易用. 完全面向对象. 具有平台无关性且 安全可靠的主要面向I n t e r n e t的开发工具. 自从1 9 9 5年正式问世以来,J a v a的快速发 ...

  7. Bone Collector&lpar;01背包&plus;记忆化搜索&rpar;

    Bone Collector Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Tota ...

  8. 做一款直播类app

    ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijk ...

  9. Gradient Boosted Regression

    3.2.4.3.6. sklearn.ensemble.GradientBoostingRegressor class sklearn.ensemble.GradientBoostingRegress ...

  10. php 生成订单号201807205598981

    php版 /** * 生成唯一订单号 */ public function build_order_no() { $no = date('Ymd').substr(implode(NULL, arra ...