省市县三级联动(jqurey+json)
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)的更多相关文章
- 将省市县三级联动的json数据,转化为element-ui能用的格式,并使用
var options=[]; var cities = { '北京': { '北京': ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区 ...
- android:省市县三级联动(基于json和spring)
一.请看效果图": 二.程序的代码: 1.MainActivity.java package com.loveplusplus.loader.demo.ui; import org.json ...
- wex5 实战 省市县三级联动与地址薄同步
无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2: 地址薄选项,利用inputSel ...
- Android 省市县 三级联动(android-wheel的使用)[转]
转载:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为 ...
- Android 省市县 三级联动(android-wheel的使用)
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个 ...
- php仿经典省市县三级联动
之前有个需求要写个类似省市县三级联动的页面,于是,网上找了点资料看了下,其实原理很简单: 当我们选择一级栏目中某条记录的时候,会获取该栏目的vaule值,并发起ajax请求,后台根据这个vaule值, ...
- 项目总结01:JSP mysql SpringMvc下中国省市县三级联动下拉框
JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP mysql数据库 SpringMvc ajax Controller层 Service层 中国地区 省 ...
- jQuery - 全国省市县三级联动
最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...
- 省市县三级联动 sql语句
发现在网上的省市县三级联动大部分是mysql的.就算是sqlserver的,也不准确.于是就把mysql的给改了下,适用sqlserver.sql语句如下: CREATE TABLE Dic_Area ...
随机推荐
- 51nod1174(RMQ)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1174 题意:中文题诶- 思路:RMQ模板题 关于RMQ: h ...
- 判断是否为gif/png图片的正确姿势
判断是否为gif/png图片的正确姿势 1.在能取到图片后缀的前提下 1 2 3 4 5 6 7 8 9 //假设这是一个网络获取的URL NSString *path = @"http:/ ...
- 配置比对脚本(python)
# -*- coding: utf- -*- from datetime import * import MySQLdb import sys import time import datetime ...
- NoSql数据库初探-mongoDB环境搭建
NoSQL数据库一改关系型数据库的缺点,更容易的集成.分布式.无模式.故障恢复等特点,正在一步步餐食关系型数据库的市场,作为一个与时俱进的码农了解一下新技术是必须的,尤其是在读了<NoSql精粹 ...
- 正定矩阵(positive definite matrix)
设M是n阶方阵,如果对任何非零向量z,都有zTMz> 0,其中zT 表示z的转置,就称M正定矩阵. 正定矩阵在合同变换下可化为标准型, 即对角矩阵. 所有特征值大于零的对称矩阵也是正定矩阵. ...
- for in 遍历json
获取对象属性的语法: 1.obj.attr 2.obj["attr"] for in 遍历json的时候, 1.for(attr in json)中的attr获取到的是json中属 ...
- 安装了VS2012 还有Update4 我的Silverlight5安装完后 我的Silverlight4项目打不开
安装了VS2012 还有Update4 我的Silverlight5安装完后 我的Silverlight4项目打不开 求助 不知道是哪里出问题了 我的Silverlihgt4项目一直报错 无法打开 ...
- byobu相关操作
http://lingbjxm.iteye.com/blog/2155833 重命名窗口:Fn F8
- 双向链表、双向循环链表的JS实现
关于链表简介.单链表.单向循环链表.JS中的使用以及扩充方法: 单链表.循环链表的JS实现 关于四种链表的完整封装: https://github.com/zhuwq585/Data-Structu ...
- Unity中的Matrix4x4类
物体平移旋转一般变换底层都是用矩阵来表示的,一般不会用到这个类.有时候需要一些世界坐标与局部坐标转换的时候,可能就要用到了. //创建平移 旋转 缩放矩阵 可以理解为一个坐标系(不知道对不对..) M ...