1.效果图 

2.联动js

 /**
* jquery.choosearea.js - 地区联动封装
*/
; (function ($) {
var choosearea = function (options) {
this.set = $.extend({
dataUrl: "/Content/Js/city_code.js",
selectDomId: {
province: "a",
city: "b",
county: "c"
},
data: null,
initAreaIds: {
Province: 0,
City: 0,
County: 0
},
eventInterface: {
renderProvinceList: function (list, selectedId) {
this.jq_province.empty().append($(this.ProvinceListHtml(list, selectedId, "请选择省")));
},
renderCityList: function (list, selectedId, isInit) {
var city = this.jq_city;
isInit = typeof (isInit) == "undefined" ? false : true;
city.empty().append($(this.CityListHtml(list, selectedId, "请选择市")));
},
renderCountyList: function (list, selectedId, isInit) {
var optionsHtml = this.CountyListHtml(list, selectedId, "请选择县");
var county = this.jq_county;
isInit = typeof (isInit) == "undefined" ? false : true;
county.empty().append($(optionsHtml));
},
onchanged: function (cityId) { }
} }, options);
this.provinceList = [];
this.cityList = [];
this.countyList = [];
this.jq_province = $("#" + this.set.selectDomId.province);
this.jq_city = $("#" + this.set.selectDomId.city);
this.jq_county = $("#" + this.set.selectDomId.county);
this._init();
};
choosearea.prototype = {};
choosearea.fn = choosearea.prototype;
choosearea.fn._init = function () {
var _this = this;
$.get(_this.set.dataUrl, {}, function (datajson) {
_this.set.data = datajson
_this._setAreaList();
_this._initRender(_this.set.initAreaIds.Province, _this.set.initAreaIds.City, _this.set.initAreaIds.County);
_this._initEvents();
}, "json");
};
//设置地区列表
choosearea.fn._setAreaList = function () {
this.provinceList = this.set.data.provinceList;
this.cityList = this.set.data.cityList;
this.countyList = this.set.data.countyList;
}; //初始化渲染
choosearea.fn._initRender = function (provinceId, cityId, countyId) { this.set.eventInterface.renderProvinceList.call(this, this.provinceList, provinceId);
var cityList = $.grep(this.cityList, function (n, i) {
return n.ProID == provinceId;
});
this.set.eventInterface.renderCityList.call(this, cityList, cityId, true);
var countyList = $.grep(this.countyList, function (n, i) {
return n.CityID == cityId;
});
this.set.eventInterface.renderCountyList.call(this, countyList, countyId, true);
}; //渲染列表
choosearea.fn.ProvinceListHtml = function (list, selectedId, firstTips) {
firstTips = firstTips || "";
var selectedAttr = selectedId == 0 ? " selected='selected'" : "";
var optionsHtml = firstTips != "" ? "<option value='0' " + selectedAttr + ">" + firstTips + "</option>" : ""; if (typeof (list) != "undefined") {
$.each(list, function (i, city) {
var selAttr = selectedId == city.ProID ? " selected='selected'" : "";
optionsHtml += "<option value='" + city.ProID + "' " + selAttr + ">" + city.ProName + "</option>";
});
};
return optionsHtml;
};
//渲染列表
choosearea.fn.CityListHtml = function (list, selectedId, firstTips) {
firstTips = firstTips || "";
var selectedAttr = selectedId == 0 ? " selected='selected'" : "";
var optionsHtml = firstTips != "" ? "<option value='0' " + selectedAttr + ">" + firstTips + "</option>" : ""; if (typeof (list) != "undefined") {
$.each(list, function (i, city) {
var selAttr = selectedId == city.CityID ? " selected='selected'" : "";
optionsHtml += "<option value='" + city.CityID + "' " + selAttr + ">" + city.CityName + "</option>";
});
};
return optionsHtml;
};
//渲染列表
choosearea.fn.CountyListHtml = function (list, selectedId, firstTips) {
firstTips = firstTips || "";
var selectedAttr = selectedId == 0 ? " selected='selected'" : "";
var optionsHtml = firstTips != "" ? "<option value='0' " + selectedAttr + ">" + firstTips + "</option>" : "";
//console.log(list);
if (typeof (list) != "undefined") {
$.each(list, function (i, city) {
var selAttr = selectedId == city.Id ? " selected='selected'" : "";
optionsHtml += "<option value='" + city.Id + "' " + selAttr + ">" + city.DisName + "</option>";
});
};
return optionsHtml;
};
//初始化事件
choosearea.fn._initEvents = function () {
var province = this.jq_province;
var city = this.jq_city;
var county = this.jq_county;
var _this = this;
province.change(function () {
var id = parseInt($(this).val());
var cityList = $.grep(_this.cityList, function (n, i) {
return n.ProID == id;
});
_this.set.eventInterface.renderCityList.call(_this, cityList, 0);
_this.set.eventInterface.renderCountyList.call(_this, [], 0, false);
}); city.change(function () {
var id = parseInt($(this).val());
var countyList = $.grep(_this.countyList, function (n, i) {
return n.CityID == id;
});
_this.set.eventInterface.renderCountyList.call(_this, countyList, 0, false);
});
};
$.choosearea = choosearea;
})(jQuery);

3.json数据

http://files.cnblogs.com/files/youngerliu/city_code.js

4.使用方法

  默认选择

new $.choosearea({
selectDomId: {
province: "selProvince",
city: "selCity",
county: "selCounty"
},
initAreaIds: {Province:"0",City:"0",County:"0"}
});

  指定选择

   new $.choosearea({
selectDomId: {
province: "selProvince",
city: "selCity",
county: "selCounty"
},
initAreaIds: {Province:"1",City:"1",County:"9"}
});

省市县三级联动(jqurey+json)的更多相关文章

  1. 将省市县三级联动的json数据,转化为element-ui能用的格式,并使用

    var options=[]; var cities = { '北京': { '北京': ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区 ...

  2. android:省市县三级联动(基于json和spring)

    一.请看效果图": 二.程序的代码: 1.MainActivity.java package com.loveplusplus.loader.demo.ui; import org.json ...

  3. wex5 实战 省市县三级联动与地址薄同步

    无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2:  地址薄选项,利用inputSel ...

  4. Android 省市县 三级联动(android-wheel的使用)[转]

    转载:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为 ...

  5. Android 省市县 三级联动(android-wheel的使用)

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个 ...

  6. php仿经典省市县三级联动

    之前有个需求要写个类似省市县三级联动的页面,于是,网上找了点资料看了下,其实原理很简单: 当我们选择一级栏目中某条记录的时候,会获取该栏目的vaule值,并发起ajax请求,后台根据这个vaule值, ...

  7. 项目总结01:JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  8. jQuery - 全国省市县三级联动

    最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...

  9. 省市县三级联动 sql语句

    发现在网上的省市县三级联动大部分是mysql的.就算是sqlserver的,也不准确.于是就把mysql的给改了下,适用sqlserver.sql语句如下: CREATE TABLE Dic_Area ...

随机推荐

  1. 51nod1174(RMQ)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1174 题意:中文题诶- 思路:RMQ模板题 关于RMQ: h ...

  2. 判断是否为gif/png图片的正确姿势

    判断是否为gif/png图片的正确姿势 1.在能取到图片后缀的前提下 1 2 3 4 5 6 7 8 9 //假设这是一个网络获取的URL NSString *path = @"http:/ ...

  3. 配置比对脚本(python)

    # -*- coding: utf- -*- from datetime import * import MySQLdb import sys import time import datetime ...

  4. NoSql数据库初探-mongoDB环境搭建

    NoSQL数据库一改关系型数据库的缺点,更容易的集成.分布式.无模式.故障恢复等特点,正在一步步餐食关系型数据库的市场,作为一个与时俱进的码农了解一下新技术是必须的,尤其是在读了<NoSql精粹 ...

  5. 正定矩阵(positive definite matrix)

    设M是n阶方阵,如果对任何非零向量z,都有zTMz> 0,其中zT 表示z的转置,就称M正定矩阵. 正定矩阵在合同变换下可化为标准型, 即对角矩阵. 所有特征值大于零的对称矩阵也是正定矩阵.   ...

  6. for in 遍历json

    获取对象属性的语法: 1.obj.attr 2.obj["attr"] for in 遍历json的时候, 1.for(attr in json)中的attr获取到的是json中属 ...

  7. 安装了VS2012 还有Update4 我的Silverlight5安装完后 我的Silverlight4项目打不开

    安装了VS2012 还有Update4  我的Silverlight5安装完后 我的Silverlight4项目打不开  求助 不知道是哪里出问题了 我的Silverlihgt4项目一直报错 无法打开 ...

  8. byobu相关操作

    http://lingbjxm.iteye.com/blog/2155833 重命名窗口:Fn F8

  9. 双向链表、双向循环链表的JS实现

    关于链表简介.单链表.单向循环链表.JS中的使用以及扩充方法:  单链表.循环链表的JS实现 关于四种链表的完整封装: https://github.com/zhuwq585/Data-Structu ...

  10. Unity中的Matrix4x4类

    物体平移旋转一般变换底层都是用矩阵来表示的,一般不会用到这个类.有时候需要一些世界坐标与局部坐标转换的时候,可能就要用到了. //创建平移 旋转 缩放矩阵 可以理解为一个坐标系(不知道对不对..) M ...