jQuery三级联动效果代码（省、市、区）
很长时间都不用jquery了，有人问我jquery写三级联动的插件我就写好了发出来吧，正好需要的人都可以看看。
一、html代码
<!DOCTYPE html>
<html>
<head>
<title>三级联动-三人行慕课</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div data-toggle='distpicker' class='form-inline' id='distpicker'>
<select class="form-control" data-province="---- 选择省 ----"></select>
<select class="form-control" data-city="---- 选择市 ----"></select>
<select class="form-control" data-district="---- 选择区 ----"></select>
</div>
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src='js/distpicker.data.js'></script>
<script type="text/javascript" src='js/distpicker.js'></script>
<script type="text/javascript">
$("#distpicker").distpicker({
placeholder: false,
autoSelect: false
});
</script>
</body>
</html>
二、上面的js引入大家看到了吗，首先引入jquery没什么好说的了，然后引入数据以及插件文件。
distpicker.data.js ： 内容是三级联动的数据（数据量特别大，查看地址：https://www.3mooc.com/front/couinfo/978）
distpicker.js ： 插件本身代码
/*!
* Distpicker v1.0.4
* https://github.com/fengyuanchen/distpicker
*
* Copyright (c) 2014-2016 Fengyuan Chen
* Released under the MIT license
*
* Date: 2016-06-01T15:05:52.606Z
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as anonymous module.
define(['jquery', 'ChineseDistricts'], factory);
} else if (typeof exports === 'object') {
// Node / CommonJS
factory(require('jquery'), require('ChineseDistricts'));
} else {
// Browser globals.
factory(jQuery, ChineseDistricts);
}
})(function ($, ChineseDistricts) {
'use strict';
if (typeof ChineseDistricts === 'undefined') {
throw new Error('The file "distpicker.data.js" must be included first!');
}
var NAMESPACE = 'distpicker';
var EVENT_CHANGE = 'change.' + NAMESPACE;
var PROVINCE = 'province';
var CIRY = 'city';
var DISTRICT = 'district';
function Distpicker(element, options) {
this.$element = $(element);
this.options = $.extend({}, Distpicker.DEFAULTS, $.isPlainObject(options) && options);
this.placeholders = $.extend({}, Distpicker.DEFAULTS);
this.active = false;
this.init();
}
Distpicker.prototype = {
constructor: Distpicker,
init: function () {
var options = this.options;
var $select = this.$element.find('select');
var length = $select.length;
var data = {};
$select.each(function () {
$.extend(data, $(this).data());
});
$.each([PROVINCE, CIRY, DISTRICT], $.proxy(function (i, type) {
if (data[type]) {
options[type] = data[type];
this['$' + type] = $select.filter('[data-' + type + ']');
} else {
this['$' + type] = length > i ? $select.eq(i) : null;
}
}, this));
this.bind();
// Reset all the selects (after event binding)
this.reset();
this.active = true;
},
bind: function () {
if (this.$province) {
this.$province.on(EVENT_CHANGE, (this._changeProvince = $.proxy(function () {
this.output(CIRY);
this.output(DISTRICT);
}, this)));
}
if (this.$city) {
this.$city.on(EVENT_CHANGE, (this._changeCity = $.proxy(function () {
this.output(DISTRICT);
}, this)));
}
},
unbind: function () {
if (this.$province) {
this.$province.off(EVENT_CHANGE, this._changeProvince);
}
if (this.$city) {
this.$city.off(EVENT_CHANGE, this._changeCity);
}
},
output: function (type) {
var options = this.options;
var placeholders = this.placeholders;
var $select = this['$' + type];
var districts = {};
var data = [];
var code;
var matched;
var value;
if (!$select || !$select.length) {
return;
}
value = options[type];
code = (
type === PROVINCE ? 86 :
type === CIRY ? this.$province && this.$province.find(':selected').data('code') :
type === DISTRICT ? this.$city && this.$city.find(':selected').data('code') : code
);
districts = $.isNumeric(code) ? ChineseDistricts[code] : null;
if ($.isPlainObject(districts)) {
$.each(districts, function (code, address) {
var selected = address === value;
if (selected) {
matched = true;
}
data.push({
code: code,
address: address,
selected: selected
});
});
}
if (!matched) {
if (data.length && (options.autoSelect || options.autoselect)) {
data[0].selected = true;
}
// Save the unmatched value as a placeholder at the first output
if (!this.active && value) {
placeholders[type] = value;
}
}
// Add placeholder option
if (options.placeholder) {
data.unshift({
code: '',
address: placeholders[type],
selected: false
});
}
$select.html(this.getList(data));
},
getList: function (data) {
var list = [];
$.each(data, function (i, n) {
list.push(
'<option' +
' value="' + (n.address && n.code ? n.address : '') + '"' +
' data-code="' + (n.code || '') + '"' +
(n.selected ? ' selected' : '') +
'>' +
(n.address || '') +
'</option>'
);
});
return list.join('');
},
reset: function (deep) {
if (!deep) {
this.output(PROVINCE);
this.output(CIRY);
this.output(DISTRICT);
} else if (this.$province) {
this.$province.find(':first').prop('selected', true).trigger(EVENT_CHANGE);
}
},
destroy: function () {
this.unbind();
this.$element.removeData(NAMESPACE);
}
};
Distpicker.DEFAULTS = {
autoSelect: true,
placeholder: true,
province: '—— 省 ——',
city: '—— 市 ——',
district: '—— 区 ——'
};
Distpicker.setDefaults = function (options) {
$.extend(Distpicker.DEFAULTS, options);
};
// Save the other distpicker
Distpicker.other = $.fn.distpicker;
// Register as jQuery plugin
$.fn.distpicker = function (option) {
var args = [].slice.call(arguments, 1);
return this.each(function () {
var $this = $(this);
var data = $this.data(NAMESPACE);
var options;
var fn;
if (!data) {
if (/destroy/.test(option)) {
return;
}
options = $.extend({}, $this.data(), $.isPlainObject(option) && option);
$this.data(NAMESPACE, (data = new Distpicker(this, options)));
}
if (typeof option === 'string' && $.isFunction(fn = data[option])) {
fn.apply(data, args);
}
});
};
$.fn.distpicker.Constructor = Distpicker;
$.fn.distpicker.setDefaults = Distpicker.setDefaults;
// No conflict
$.fn.distpicker.noConflict = function () {
$.fn.distpicker = Distpicker.other;
return this;
};
$(function () {
$('[data-toggle="distpicker"]').distpicker();
});
});
jQuery三级联动效果代码（省、市、区）的更多相关文章
- PyQt5--基础篇：用eric6工具实现三级联动效果
今天给大家介绍下python gui界面的三级联动效果,我们用工具eric6来实现,先看下效果图. 首先我们先创建项目linkage,再新建窗体进入到Qt设计师工具开始设计界面,完成后保存并退出. 在 ...
- js之省市区(县)三级联动效果
省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- 基于jQuery+JSON的省市县 二级 三级 联动效果
省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉 ...
- 省市县三级联动js代码
省市县三级联动菜单,JS全国省市县(区)联动代码,一般可以用于用户注册或分类信息二手交易网站,需要的朋友直接复制代码就可以用了,不过有朋友反馈说缺少某些城市,具体缺少哪个尚不知,请想用的朋友自己补全吧 ...
- Ajax来实现下拉框省市区三级联动效果（服务端基于express）
//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...
- Vue如何使用vue-area-linkage实现地址三级联动效果
很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1. ...
- 用Vue2仿京东省市区三级联动效果
三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下 ...
- jquery 实现层级下拉框联动效果 代码
<select name="fCareId" id="fCareId"> <option selected="selected&qu ...
随机推荐
- java设计模式4.适配器模式、装饰器模式
适配器模式 把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够工作. 1. 类的适配器模式 目标角色:期望的接口,对于类的适配器模式,此角色不可以是具体类 ...
- 牛客小白月赛6 G 指纹锁 set的自动排序 模板
链接:https://www.nowcoder.com/acm/contest/136/G来源:牛客网 题目描述 HA实验有一套非常严密的安全保障体系,在HA实验基地的大门,有一个指纹锁. ...
- hdu 1182 A Bug's Life(简单种类并查集）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1829 题意:就是给你m条关系a与b有性关系,问这些关系中是否有同性恋 这是一道简单的种类并查集,而且也 ...
- Maven依赖配置和依赖范围
Maven依赖配置 一个dependency的声明可以包含以下元素: <dependencies> <dependency> <groupId>org.apache ...
- 小程序组件 scroll-view 横向滚动条无效
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过,并且换行了),经调试发现: 1.sc ...
- 虚拟化（二）-VMware workstation
https://www.cnblogs.com/zhrngM/p/9547945.html vmware workstation的最新版本是10.0.2.相信大家也都使用过,其中的简单的虚拟机的创建, ...
- 谈谈你对HTML语义化的理解。
1.什么是HTML语义化? 基本上都是围绕着几个主要的标签,像标题(h1-h6),列表(li),强调(strong em)等. 根据内容的语义化(内容结构化),选择合适的标签(代码语义化),便于开发者 ...
- Redis集群增加节点和删除节点
本文主要是承接上一篇文章Redis集群的离线安装成功以后,我们如何进行给集群增加新的主从节点(集群扩容)以及如何从集群中删除节点(集群缩容),也就是集群的伸缩,集群伸缩的原理是控制虚拟槽和数据在节点之 ...
- golang实现get和post请求的服务端和客户端
服务端 在golang中,实现一个普通的http接口可以处理get请求和x-www-form-urlencoded类型的post请求,而如果想实现处理json数据的post请求,则需要用另外的方式实现 ...
- Linux 笔记 - 第二十章 配置 Nginx 反向代理和负载均衡
一.简介 由于 Nginx 的反向代理和负载均衡功能经常被提及,所以将这两个功能单独提出来进行讲解. Nginx 其实仅仅是作为 Nginx Proxy 反向代理使用的,因为这个反向代理功能表现的效果 ...