jQuery 省市区多级（三级/四级/五级。。。）联动 BY 凨来了

/*** 省市县区三级多级联动* author:凨来了*/
jQuery(function($) {var city=[],cityName=[];$.fn.city = function (opt) {var $id = $(this),options = $.extend({url: 'data.php?parent_id=',/*当前ID，设置选中状态*/selected: null,/*上级栏目ID*/parent_id: null,/*主键ID名称*/valueName: "id",/*名称*/textName: "cn_name",/*默认名称*/defaultName: "-----",/*下级对象ID*/nextID: null}, opt),selected,_tmp;if(options.parent_id==null){_tmp=$id.data('parent_id');if(_tmp!==undefined){options.parent_id=_tmp;}}//初始化层this.init = function () {if($.inArray($id.attr('id'),cityName)==-1){cityName.push($id.attr('id'));}if(!options.selected){options.selected=$id.data('selected');}$id.append(format(get(options.parent_id)));};function get(id) {if (id !== null && !city[id]) {getData(id);return city[id];}else if (id !== null && city[id]) {return city[id];}return [];}function getData(id) {$.ajax({url: options.url+ id,type: 'GET',async: false,success: function (d) {if (d.status == 'y') {city[id] = d.data;}}});}function format(d) {var _arr = [], r, selected = '';if (options.defaultName !== null) _arr.push('<option value="">' + options.defaultName + '</option>');if ($.isArray(d)) for (var v in d) {r = null;r = d[v];selected = '';if (options.selected && options.selected == (r[options.valueName])) {selected = 'selected';}_arr.push('<option value="' + r[options.valueName] + '" ' + selected + '>' + r[options.textName] + '</option>');}return _arr.join('');}this.each(function () {options.nextID && $id.on('change', function () {var $this = $('#' + options.nextID),id=$(this).attr('id'),i=$.inArray(id,cityName);$this.html(format(get($(this).val())));if ($.isArray(cityName)) for (var v in cityName) {if(v>(i+1)){$('#'+cityName[v]).html(format());}}});});this.init();}
});

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>jQuery 省市区多级（三级/四级/五级。。。）联动 BY 凨来了</title>
</head>
<body><dl><dt>所在地区：</dt><dd><select id="province" name="province" class="form-control city-select" data-selected="10" data-parent_id="0"></select><select id="city" name="city" class="form-control city-select" data-selected="112" data-parent_id="10"></select><select id="county" name="county" class="form-control city-select" data-selected="1387" data-parent_id="112"></select></dd>
</dl><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="city.js"></script>
<script type="text/javascript">$(function(){$('#province').city({nextID:'city'});$('#city').city({nextID:'county'});$('#county').city();});
</script>
</body>
</html>

demo下载

jQuery 省市区多级（三级/四级/五级。。。）联动 BY 凨来了相关推荐

2023中国省市区数据镇村五级联动地址
你们看下这些数据准确么? 中华人民共和国行政区划(五级):省级.地级.县级.乡级和村级 gitee https://gitee.com/red-jasmine/region github https: ...
C++编程一级二级三级四级五级题库260题及参考答案第六版
C语言一级题库80题 C语言一级考纲说明 1.计算(a+b)/c的值 2.反向输出一个三位数(2020年真题) 3.打印字符 4.输出保留12位小数的浮点数 5.判断能否被3,5,7整除 6.骑车与走 ...
ajax实现多级联动菜单,jquery 实现二级/三级/多级联动菜单的思路及代码
本文介绍使用jquery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级.三级或多级联动也可以按照此方法完成. 文章中涉及到的数据表为City,为方便管理. 设计此表如下 ID:自增 ...
jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/ 支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> & ...
jquery省市区ajax,jQuery省市区三级联动
jQuery省市区三级联动演示下载,本文将给大家介绍一款非常好用的省市区三级联动插件:cityselect.通过这款城市联动插件,省市区三级联动cityselect插件可以无刷新省市区联动效果. 查看 ...
jquery省地市三级联动
需要核心文件jquery.cityselect.js,通过ajax访问获取省地市数据文件 /*Ajax 三级省市联动http://code.ciaoca.cn/日期:2012-7-18settings ...
jquery省市县三级联动
Jquery省市县三级联动,数据来源js,无需调用接口可前往本人发布资源<Jquery省市县三级>免积分下载目录效果 html部分 <!DOCTYPE html> < ...
省市区(县)三级联动代码（js 数据源）
ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...
Flutter省市区的三级联动
Flutter省市区的三级联动最近做Flutter项目的时候,需要做一个省市区选择的功能.主要是通过CupertinoPicker组件实现功能的. Expanded(flex: 1,child: C ...
js之省市区(县)三级联动效果
省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...

jQuery 省市区多级（三级/四级/五级。。。）联动 BY 凨来了

jQuery 省市区多级（三级/四级/五级。。。）联动 BY 凨来了相关推荐

最新文章

热门文章