后台代码,获取数据如下:
/// <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 二级联动的更多相关文章
-
MVC二级联动使用$.ajax方法获取后端返回的字符串
在"MVC二级联动使用$.getJSON方法"中使用$.getJSON()获取后端返回的JSon. 本篇使用jQuery的$.ajax()获取后端返回的字符串,实现二级联动. ...
-
MVC二级联动使用$.getJSON方法
本篇使用jQuery的$.getJSON()实现二级联动. □ View Models 1: namespace MvcApplication1.Models 2: { 3: public cla ...
-
MVC 二级联动 可以试试
后台代码,获取数据如下: /// <summary> 2 /// 获取省份 3 /// </summary> 4 public JsonResult GetProvinceli ...
-
asp.net mvc jQuery 城市二级联动
页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...
-
Spring MVC中Ajax实现二级联动
今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody p ...
-
C# MVC LayUI实现下拉框二级联动
一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...
-
Javascript中二级联动
主要使用到到了地址JSON格式,来做,没有涉及数据库的读取. <!DOCTYPE html><html><head> <meta charset=" ...
-
JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串,和配置文件 List<;T>;.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动
JavaScript日历控件开发 概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...
-
iOS开发之";省市";二级联动的数据组织(PHP版)以及PickerView的实现与封装
之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...
随机推荐
-
ios基础篇(二十八)—— UITableView的上拉加载
本文主要展示一个demo实现UITableView的上拉加载数据: 先看看效果图: 接着上拉,加载更多数据: 主要实现的效果是在我们上拉结束拖拽之后,开始加载数据,数据加载的过程中有滚动轮提示用户正在 ...
-
Java中静态内部类的理解
class A { public void func() { A a=new A(); C c=a.new C(); } public static void main(String[] args) ...
- python脚本利用windows计划定时执行
-
ajax练习习题二三级联动
异步执行 1数据传输收发数据的时候不用等待对方接受,可以继续发送 2Ajax 在调用处理页面处理数据的时候,下面的代码可以继续执行,效率高 同步执行 1收发数据的时候要等到对方接受的成功,才可以继续发 ...
-
ASP连接11种数据库的常用语法
1.Access数据库的DSN-less连接方法: 以下为引用的内容: set adocon=Server.Createobject("adodb.connection") ado ...
-
jsp js java
Java技术 J a v a是一种 简单易用. 完全面向对象. 具有平台无关性且 安全可靠的主要面向I n t e r n e t的开发工具. 自从1 9 9 5年正式问世以来,J a v a的快速发 ...
-
Bone Collector(01背包+记忆化搜索)
Bone Collector Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Tota ...
-
做一款直播类app
ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijk ...
-
Gradient Boosted Regression
3.2.4.3.6. sklearn.ensemble.GradientBoostingRegressor class sklearn.ensemble.GradientBoostingRegress ...
-
php 生成订单号201807205598981
php版 /** * 生成唯一订单号 */ public function build_order_no() { $no = date('Ymd').substr(implode(NULL, arra ...