jq_area地区三级联动插件
网站注册,购物下单,都需要的地区三级联动
jq_area地区三级联动插件
【插件功能】
jq_area地区三级联动插件:功能就如插件名显而易见嘛。
【原理】
通过循环遍历数组生成相应的option元素。
【演示地址】
【插件参数】
url 数据读取AJAX地址:功能尚未开发
cache 城市数据,默认region.js文件
provinceId 省份字段ID,默认#province
cityId 城市字段ID,默认#city
countyId 区县字段ID,默认#county
【代码】
// 基于JQ的地区三级联动
//region.js为城市数据文件,调用时需要给cache赋值,如$("#area").area({cache:region});
// 创建一个闭包
(function($) {
//插件主要内容
$.fn.area = function(options) {
// 处理默认参数
var opts = $.extend({}, $.fn.area.defaults, options);
// 保存JQ的连贯操作
return this.each(function()
{
getProvinces();
$(opts.provinceId).change(function(){
getCities();
});
$(opts.cityId).change(function(){
getCounties();
});
});
//ajax获取地区数据
function getData()
{
//可以通过AJAX把地区数据读取到opts.cache中,数据格式为 /*{"provinces2":{"region_id":"2","region_name":"\u5317\u4eac","city":{"cities52":{"region_id":
网站注册,购物下单,都需要的地区三级联动
"52","region_name":"\u5317\u4eac","county":{"counties500":{"region_id":"500","region_name":"\u4e1c\u57ce\u533a"}}} 是一个三维数组的json数据,provinces2为省的id加provinces前缀作为key值;每个省数据中有city城市数据数组,每个城市数 据中有county县数据数组*/ }
//获取省数据
function getProvinces(){
var pro = "";
$.each(opts.cache, function(i,item){
});
$(opts.provinceId).empty().append(pro);
getCities();
}
//获取城市数据
function getCities()
{
var proIndex = $(opts.provinceId).val();
showCities(proIndex);
getCounties();
}
//显示城市数据
function showCities(proIndex){
var cit = "";
if(opts.cache["provinces"+proIndex].city == null){
$(opts.cityId).empty();
return;
}
$.each(opts.cache["provinces"+proIndex].city, function(i,item){
cit += "<option value="+item.region_id+">" + item.region_name+ "</option>"; });
$(opts.cityId).empty().append(cit);
}
//获取县数据
function getCounties(){
var proIndex = $(opts.provinceId).val();
var citIndex = $(opts.cityId).val();
showCounties(proIndex,citIndex);
}
pro += "<option value="+item.region_id+">" + item.region_name + "</option>";
网站注册,购物下单,都需要的地区三级联动
//显示县数据
function showCounties(proIndex,citIndex){ var cou = ""; if(opts.cache["provinces"+proIndex].city["cities"+citIndex].county == null){ $(opts.countyId).empty();
return;
}
$.each(opts.cache["provinces"+proIndex].city["cities"+citIndex].county,function(i,item){
cou += "<option value="+item.region_id+">" + item.region_name+ "</option>"; });
$(opts.countyId).empty().append(cou);
}
};
//插件主要内容结束
// 插件的defaults
$.fn.area.defaults = {
url:'',
cache:'',//地区数据
provinceId:'#province',
cityId:'#city',
countyId:'#county'
};
// 闭包结束
})(jQuery);
…… 此处隐藏:410字,全部文档内容请下载后查看。喜欢就下载吧 ……
相关推荐:
- [行业资料]创设有效语境 改善英语教学
- [行业资料]微商推广引流的44种方法
- [行业资料]医疗机构输血科血库基本标准
- [行业资料]锂离子电池项目可行性研究报告(2015年
- [行业资料]申请执行人长沙市开福区人口和计划生育
- [行业资料]倾听草木的呼吸(初中阅读)
- [行业资料]长沙新环境厂房租赁合同书
- [行业资料]2022年经济师《金融专业知识与实务(中
- [行业资料]浦东新区2009学年度第二学期期末考试七
- [行业资料]企业劳动用工协议书
- [行业资料]最新苏科版七年级数学上册第二章有理数
- [行业资料]12星座与英语词汇学习
- [行业资料]2008年高考化学科经验
- [行业资料]镇政府2015年工作总结及2016年政府工作
- [行业资料]梧州市产业园区规划及招商引资报告
- [行业资料]大体积砼承台施工作业指导书
- [行业资料]学生干部在创建和谐校园中的作1
- [行业资料]小学语文教师实习个人总结
- [行业资料]2014完美最新奖金制度
- [行业资料]2016年一建建筑实务-重要知识点地质
- 【最新】人教版小学语文三年级上册:第
- 中国中小企业年鉴(地区数据)
- 动物与人类生活的关系 ppt
- 选修3 专题3 胚胎工程知识点
- 遥感技术基础复习题
- 公司员工职业生涯规划实施方案
- 辽宁省建筑施工企业安全生产许可证管理
- 15秋福师《中外幼儿教育史》在线作业二
- 2015-2020年中国网络视频行业深度调研
- 数学八年级下华东师大版21.1算术平均数
- 苏教版一年级语文下册《小松树和大松树
- 油画论文:摄影对当下油画艺术的影响
- 西方自由主义影响下的新闻自由——从17
- 基于支持向量机的商业银行信用风险评估
- 机械设计基础复习题答案(修改)(1)
- 语文:高考作文素材:材料引用及论点论
- 月份工程进度款结算单62+56
- 2018-2023年中国互联网基金行业现状研
- 人教版 PEP 五年级下册Unit1Lesson1 th
- 2014学年第二学期四年级数学期末教学质




