省市区县街道四级联动下拉菜单

参考代码：
　　JQuery中国省市区街道三级、四级联动下拉菜单插件
　　（将代码中单纯的四级联动提取出来，对其中的bug进行了修正，并完善了一些不完美的地方）

先通过最终效果看一下功能：

代码如下：

index.html:（注：请将代码中的jquery.min.js替换成你本地的jquery地址）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery四级联动下拉菜单代码</title><script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.citys.js"></script>
</head>
<body>
<div id="demo3" class="citys"><p><select name="province" id="province"></select><select name="city"></select><select name="area"></select><select name="town"></select></p>
</div>
<script type="text/javascript">var selectedAddress = {'province':'', 'city':'', 'area':'', 'town':''};var $town = $('select[name="town"]');var clearTown = function(){$town.hide().empty();}var townFormat = function(info){clearTown();if(info['code']%1e4&&info['code']<7e5){ //是否为“区”且不是港澳台地区$.ajax({url:'http://passer-by.com/data_location/town/'+info['code']+'.json',dataType:'json',success:function(town){$town.show();$town.append('<option value=""> - 街道、乡镇 - </option>');for(i in town){$town.append('<option value="'+i+'">'+town[i]+'</option>');}}});}};$('#demo3').citys({onChange: function(info){clearTown();selectedAddress.province = info.province;selectedAddress.city = info.city;selectedAddress.area = info.area;},onAreaChange:function(info){townFormat(info);}},function(api){var info = api.getInfo();townFormat(info);});$town.on('change', function(){selectedAddress.town = $(this).find("option:selected").text();});console.log(selectedAddress); //输出最终选择的省、市、区县、街道
</script>
</body>
</html>

jquery.cities.js:

;(function (factory) {if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {// AMD或CMDdefine([ "jquery" ],factory);} else if (typeof module === 'object' && module.exports) {// Node/CommonJSmodule.exports = function( root, jQuery ) {if ( jQuery === undefined ) {if ( typeof window !== 'undefined' ) {jQuery = require('jquery');} else {jQuery = require('jquery')(root);}}factory(jQuery);return jQuery;};} else {//Browser globalsfactory(jQuery);}
}(function ($) {$.support.cors = true;$.fn.citys = function(parameter,getApi) {if(typeof parameter == 'function'){ //重载getApi = parameter;parameter = {};}else{parameter = parameter || {};getApi = getApi||function(){};}var defaults = {dataUrl:'http://passer-by.com/data_location/list.json',     //数据库地址dataType:'json',          //数据库类型:'json'或'jsonp'provinceField:'province', //省份字段名cityField:'city',         //城市字段名areaField:'area',         //地区字段名valueType:'code',         //下拉框值的类型,code行政区划代码,name地名code:0,                   //地区编码province:0,               //省份,可以为地区编码或者名称city:0,                   //城市,可以为地区编码或者名称area:0,                   //地区,可以为地区编码或者名称required: false,           //是否必须选一个nodata: 'hidden',         //当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理onChange:function(){},     //地区切换时触发,回调函数传入地区数据onAreaChange:function(){} //区县切换时触发};var options = $.extend({}, defaults, parameter);return this.each(function() {//对象定义var _api = {};var $this = $(this);var $province = $this.find('select[name="'+options.provinceField+'"]'),$city = $this.find('select[name="'+options.cityField+'"]'),$area = $this.find('select[name="'+options.areaField+'"]');$.ajax({url:options.dataUrl,type:'GET',crossDomain: true,dataType:options.dataType,jsonpCallback:'jsonp_location',success:function(data){var province,city,area,hasCity;if(options.code){   //如果设置地区编码，则忽略单独设置的信息var c = options.code - options.code%1e4;if(data[c]){options.province = c;}c = options.code - (options.code%1e4 ? options.code%1e2 : options.code);if(data[c]){options.city = c;}c = options.code%1e2 ? options.code : 0;if(data[c]){options.area = c;}}var updateData = function(){province = {},city={},area={};hasCity = false;       //判断是非有地级城市for(var code in data){if(!(code%1e4)){     //获取所有的省级行政单位province[code]=data[code];if(options.required&&!options.province){if(options.city&&!(options.city%1e4)){  //省未填，并判断为直辖市options.province = options.city;}else{options.province = code;}}else if(data[code].indexOf(options.province)>-1){options.province = isNaN(options.province)?code:options.province;}}else{var p = code - options.province;if(options.province&&p>0&&p<1e4){    //同省的城市或地区if(!(code%100)){hasCity = true;city[code]=data[code];if(data[code].indexOf(options.city)>-1){options.city = isNaN(options.city)?code:options.city;}}else if(p>9000){                   //省直辖县级行政单位city[code] = data[code];if(data[code].indexOf(options.city)>-1){options.city = isNaN(options.city)?code:options.city;}}else if(hasCity){                  //非直辖市var c = code-options.city;if(options.city&&c>0&&c<100){     //同个城市的地区area[code]=data[code];if(data[code].indexOf(options.area)>-1){options.area = isNaN(options.area)?code:options.area;}}}else{area[code]=data[code];            //直辖市if(data[code].indexOf(options.area)>-1){options.area = isNaN(options.area)?code:options.area;}}}}}};var format = {province:function(){$province.empty();if(!options.required){$province.append('<option value=""> - 所在省 - </option>');}for(var i in province){$province.append('<option value="'+(options.valueType=='code'?i:province[i])+'" data-code="'+i+'">'+province[i]+'</option>');}if(options.province){var value = options.valueType=='code'?options.province:province[options.province];$province.val(value);}this.city();},city:function(){$city.empty();if(!hasCity){$city.css('display','none');}else{$city.css('display','');if(!options.required){$city.append('<option value=""> - 所在市 - </option>');}if(options.nodata=='disabled'){$city.prop('disabled',$.isEmptyObject(city));}else if(options.nodata=='hidden'){$city.css('display',$.isEmptyObject(city)?'none':'');}for(var i in city){$city.append('<option value="'+(options.valueType=='code'?i:city[i])+'" data-code="'+i+'">'+city[i]+'</option>');}if(options.city){var value = options.valueType=='code'?options.city:city[options.city];$city.val(value);}else if(options.area){var value = options.valueType=='code'?options.area:city[options.area];$city.val(value);}}this.area();},area:function(){$area.empty();if(!options.required){$area.append('<option value=""> - 所在区、县 - </option>');}if(options.nodata=='disabled'){$area.prop('disabled',$.isEmptyObject(area));}else if(options.nodata=='hidden'){$area.css('display',$.isEmptyObject(area)?'none':'');}for(var i in area){$area.append('<option value="'+(options.valueType=='code'?i:area[i])+'" data-code="'+i+'">'+area[i]+'</option>');}if(options.area){var value = options.valueType=='code'?options.area:area[options.area];$area.val(value);}}};//获取当前地理信息_api.getInfo = function(){var status = {direct:!hasCity,province:data[options.province]||'',city:data[options.city]||'',area:data[options.area]||'',code:options.area||options.city||options.province};return status;};//事件绑定$province.on('change',function(){options.province = $(this).find('option:selected').data('code')||0; //选中节点的区划代码options.city = 0;options.area = 0;updateData();format.city();options.onChange(_api.getInfo());});$city.on('change',function(){options.city = $(this).find('option:selected').data('code')||0; //选中节点的区划代码options.area = 0;updateData();format.area();options.onChange(_api.getInfo());});$area.on('change',function(){options.area = $(this).find('option:selected').data('code')||0; //选中节点的区划代码options.onChange(_api.getInfo());options.onAreaChange(_api.getInfo());});//初始化updateData();format.province();if(options.code){options.onChange(_api.getInfo());}getApi(_api);}});});};
}));

转载于:https://www.cnblogs.com/xuehaoyue/p/10045730.html

省市区县街道四级联动下拉菜单相关推荐

addoption php,无忧建站-ajax+php无刷新二级联动下拉菜单(省市联动)源码
/** * ajax无刷新二级联动下拉菜单(省市联动) * * @author arcow * @version 1.0 * @lastupdate 2005-12-29 * */ ...
dw二级联动下拉菜单插件宋君墨_Excel实例——一级、二级、多级下拉菜单一次讲透...
啥叫下拉菜单?啥叫一级?二级?多级?你们都在说啥? 一级下拉菜单其实是一级,这里就不再多次强调是一级了,就是下拉菜单! 当需要多人填写,又保证填写规范的时候,下拉菜单使用起来是非常有必要了!两种办法 ...
python三级联动菜单_2分钟制作智能式联动下拉菜单，轻松搞定重复内容，录入不出错...
在日常工作中,对于重复性录入的内容,如员工姓名,固定的产品型号等.你是不是还在一个个手动输入? 2分钟制作一个联动下拉菜单,不仅可以减少录入的错误率,还可以大大减少工作量,我们一起来学习一下吧~ 制作 ...
jquery二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果大类: 前端技术 ...
中国地区三级联动下拉菜单
原文地址为: 中国地区三级联动下拉菜单 <html> <head> <meta http-equiv="Content-Type" content=& ...
Axure 9 实战案例，动态面板的应用 4.1，省市区三级联动下拉菜单（重制简易版）
前言 Hello!欢迎来到Axure 9 实战案例教程专栏. 本次课程我们继续来学习一下,动态面板的应用.本篇我们来讲解一下,如何绘制省市区联动下拉菜单(重新撰写简易版). 下拉菜单初稿为了节省时间 ...
popwindow下拉筛选二级联动_职场人必备！一分钟搞定Excel二级联动下拉菜单
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...
ThinkPHP + Ajax 实现2级联动下拉菜单
为什么80%的码农都做不了架构师?>>> 首先是数据库的设计.分类表叫cate. 我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父 ...
dropdownlist三级联动怎么实现_Excel下拉菜单不会做？15秒教会你制作一二三级联动下拉菜单，从此做表不求人！...
Hi,各位叨友们好呀!我是叨叨君~ 我们都知道,在使用Excel表格统计数据的时候,为了方便录入,通常会在Excel中设置下拉菜单,以便我们输入相同的内容. 那么,Excel中一级.二级.三级联动下拉 ...
中国地区三级联动下拉菜单的实现
1.首先是js文件(area.js): 1 function Dsy() 2 { 3 this.Items = {}; 4 } 5 Dsy.prototype.add = function(id,iA ...

省市区县街道四级联动下拉菜单

省市区县街道四级联动下拉菜单相关推荐

最新文章

热门文章