城市三级联动 AJAX-原生js封装

话不多说我们先来一张效果图给大家看一下：

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市三级联动 - citys-原生js封装</title>
　　<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
　　<link rel="icon" href="../public/image/favicon.png" type="images/png"/>
　　<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
　　<link rel="stylesheet" type="text/css" href="../public/style/common.css">
　　<style type="text/css">
　　　　/*公共*/
　　　　html{
　　　　　　height:100%;
　　　　}
　　　　body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
　　　　　　margin: 0;
　　　　　　padding: 0
　　　　}
　　　　ol, ul {
　　　　　　list-style: none
　　　　}
　　　　body{
　　　　　　position: relative;
　　　　　　min-height:100%;
　　　　　　font-size:14px;
　　　　　　font-family: Tahoma, Verdana,"Microsoft Yahei";
　　　　　　color:#333;
　　　　}
　　　　a{
　　　　　　text-decoration: none;
　　　　　　color:#333;
　　　　}

　　　　.header{
　　　　　　width: 960px;
　　　　　　padding-top: 15px;
　　　　　　margin: 0 auto;
　　　　　　line-height: 30px;
　　　　　　text-align: right;
　　　　}
　　　　.header a{
　　　　　　margin: 0 5px;
　　　　}
.main{
width:960px;
margin: 50px auto 0;
}
.code{
border:1px dashed #e2e2e2;
padding:10px 5px;
margin-bottom:25px;
}
pre {
font-family: "Microsoft Yahei",Arial,Helvetica;
white-space: pre-wrap; /*css-3*/
white-space: -moz-pre-wrap; /*Mozilla,since1999*/
white-space: -pre-wrap; /*Opera4-6*/
white-space: -o-pre-wrap; /*Opera7*/
word-wrap: break-word; /*InternetExplorer5.5+*/
}
.example{
padding-top:40px;
margin-bottom:90px;
}
.example .call{
padding:18px 5px;
background:#f0f5f8;
}
.example h2{
padding-top:20px;
margin-bottom:7px;
}
.example table {
width:100%;
table-layout:fixed;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #cee1ee;
border-left: 0;
}
.example thead {
border-bottom: 1px solid #cee1ee;
background-color: #e3eef8;
}
.example tr {
line-height: 24px;
font-size: 13px;
}
.example tr:nth-child(2n) {
background-color: #f0f5f8;
}
.example tr th,.example tr td {
border-left: 1px solid #cee1ee;
word-break: break-all;
word-wrap: break-word;
padding:0 10px;
font-weight: normal;
}
.example tr th {
color: #555;
padding-top: 2px;
padding-bottom: 2px;
text-align: left;
}
/*公共*/

.citys{
margin-bottom: 10px;
}
.citys p{
line-height: 28px;
}
.warning{
color: #c00;
}
table a{
margin-right: 8px;
color: #369;
}
</style>
<script type="text/javascript">
　　/*封装代码*/
　　(function() {
　　　　var Citys = function(el, opts,getApi) {
　　　　var self = this;
　　　　var defaults = {
　　　　　　　　　　dataUrl:'http://www.huanghanlian.com/data_location/list.json', //数据库地址
　　　　　　　　　　provinceField:'province', //省份字段名
　　　　　　　　　　cityField:'city', //城市字段名
　　　　　　　　　　areaField:'area', //地区字段名
　　　　　　　　　　province:'', //省份名称
　　　　　　　　　　city:'', //城市名称
　　　　　　　　　　area:'', //地区名称
　　　　　　　　　　required: true, //是否必须选一个
　　　　　　　　　　nodata: 'hidden', //当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理
　　　　　　　　　　onChange:function(){} //地区切换时触发,回调函数传入地区数据
　　　　}
　　　　opts = opts || {};
　　　　getApi = getApi||function(){};
　　　　for (var w in defaults) {
　　　　　　if ("undefined" == typeof opts[w]) {
　　　　　　　　opts[w] = defaults[w];
　　　　}
　　}
this.options = opts;
this.container = r(el);

if (this.container.length > 1) {
var x = [];
return this.container.each(function() {
x.push(new Citys(this, opts,getApi))
}), x
}

this.$this = this.container;
this.$province = this.$this.find('select[name="'+this.options.provinceField+'"]'),
this.$city = this.$this.find('select[name="'+this.options.cityField+'"]'),
this.$area = this.$this.find('select[name="'+this.options.areaField+'"]');
this.data;
this.state=false;
this.province = [];
this.city = [];
this.area = [];

for (var i=0;i < this.province.length;i++) {
self.$province.append('<option value="' + this.province[i] + '">' + this.province[i] + '</option>');
}
if (self.options.province) {
self.$province[0].value=self.options.province;//(self.options.province);
}
this.citys();
},
citys:function(){
var self = this;
emptys(self.$city[0])
if (!self.options.required) {
self.$city.append('<option value=""> - 请选择 - </option>');
}
if (self.options.nodata == 'disabled') {
if(!isEmptyObject(self.city.length)){
self.$city[0].setAttribute('disabled',true);
}else{
self.$city[0].removeAttribute('disabled')
}
} else if (self.options.nodata == 'hidden') {
if(!isEmptyObject(self.city.length)){
self.$city[0].style.display = "none";
}else{
self.$city[0].style.display = "";
}
}
for (var i=0;i < this.city.length;i++) {
self.$city.append('<option value="' + this.city[i] + '">' + this.city[i] + '</option>');
}
if (self.options.city) {
self.$city[0].value=self.options.city;
}
this.areas();
},
areas:function(){
var self = this;
emptys(self.$area[0])
if (!self.options.required) {
self.$area.append('<option value=""> - 请选择 - </option>');
}
if (!isEmptyObject(self.city.length)) {
self.$area[0].style.display = "none";
} else {
self.$area[0].style.display = "";
if (self.options.nodata == 'disabled') {
if (!isEmptyObject(self.area.length)) {
self.$area[0].setAttribute('disabled', true);
} else {
self.$area[0].removeAttribute('disabled')
}
} else if (self.options.nodata == 'hidden') {
if (!isEmptyObject(self.area.length)) {
self.$area[0].style.display = "none";
} else {
self.$area[0].style.display = "";
}
}
}
for (var i=0;i < this.area.length;i++) {
self.$area.append('<option value="' + this.area[i] + '">' + this.area[i] + '</option>');
}
if (self.options.area) {
self.$area[0].value=self.options.area;
}
},
//获取当前地理信息
getInfo:function() {
var self = this;
var status = {
province: self.options.province || '',
city: self.options.city || '',
area: self.options.area || '',
};
return status;
},
//事件绑定
event: function() {
var self = this;
this.$province[0].addEventListener("change", function() {
self.options.province = self.$province[0].value;
self.options.city = "";
self.options.area = "";
self.city.length=0;
self.area.length=0;
self.updateData();
self.citys();
self.options.onChange(self.getInfo());
}, false);
this.$city[0].addEventListener("change", function() {
self.options.city = self.$city[0].value;
self.options.area = "";
self.area.length=0;
self.updateData();
self.areas();
self.options.onChange(self.getInfo());
}, false);
this.$area[0].addEventListener("change", function() {
self.options.area = self.$area[0].value;
self.options.onChange(self.getInfo());
}, false);

},
//初始化
init: function() {
var self = this;
//渲染dom
this.updateData();
self.provinces();
this.event();
},
}

function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}

//清空元素
function emptys(selector){
while (selector.firstChild){
selector.removeChild(selector.firstChild);
}
}
//判断真假
function isEmptyObject(obj){
if(obj){
return true;
}else{
return false;
}
}

window.citys = Citys;
})()
/*封装代码*/
</script>
</head>
<body>
<div class="header">
<a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
<a href="/widget/">返回首页</a>
</div>
<div class="main">

</script>

<div id="demo1" class="citys">
<p>
<select name="province"></select>
<select name="city"></select>
<select name="area"></select>
</p>
</div>
<div class="code">
<p>通过地区名称初始化设置</p>
<pre>
new citys("#demo1", {
province: '江西',
city: '抚州',
area: '宜黄县',
});
</pre>
</div>
<script type="text/javascript">
new citys("#demo1", {
province: '江西',
city: '抚州',
area: '宜黄县',
});
</script>
<div id="demo2" class="citys">
<p>
<select name="province"></select>
<select name="city"></select>
<select name="area"></select>
</p>
<p id="place">请选择地区</p>
</div>
<div class="code">
<p>事件处理</p>
<pre>
var place=document.getElementById("place")
new citys("#demo2", {
required: false,
nodata:'disabled',
onChange:function(data){
place.innerHTML='当前选中地区：'+data['province']+' '+data['city']+' '+data['area'];
}
});
</pre>
</div>
<script type="text/javascript">
var place=document.getElementById("place")
new citys("#demo2", {
required: false,
nodata:'disabled',
onChange:function(data){
place.innerHTML='当前选中地区：'+data['province']+' '+data['city']+' '+data['area'];
}
});
</script>

<div id="demo3" class="citys">
<p>
<select name="province"></select>
<select name="city"></select>
<select name="area"></select>
</p>
<p id="place3">请选择地区</p>
</div>
<div class="code">
<p>事件处理</p>
<pre>
var place=document.getElementById("place")
new citys("#demo2", {
required: false,
nodata:'disabled',
onChange:function(data){
place3.innerHTML='当前选中地区：'+data['province']+' '+data['city']+' '+data['area'];
}
});
</pre>
</div>
<script type="text/javascript">
var place3=document.getElementById("place3")
new citys("#demo3", {
required: false,
onChange:function(data){
place3.innerHTML='当前选中地区：'+data['province']+' '+data['city']+' '+data['area'];
}
});
</script>

<div class="example">
<div class="call">
<h1>调用方法：</h1>
<p>new citys("selector",options,callback(api));</p>
</div>
<h2> options参数</h2>
<table>
<thead>
<tr>
<th width="150">参数</th>
<th width="120">默认值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>dataUrl</td>
<td>[数据库地址]</td>
<td>
<p>最新数据库（2016年08月）：<a href="http://www.huanghanlian.com/data_location/list.json" target="_blank">JSON格式</a></p>
<p>数据库项目：<a href="https://github.com/huanghanzhilian/data_location" target="_blank">中国行政区划</a></p>
</td>
</tr>
<tr>
<td>provinceField</td>
<td>'province'</td>
<td>省份(省级)字段名</td>
</tr>
<tr>
<td>cityField</td>
<td>'city'</td>
<td>城市(地级)字段名</td>
</tr>
<tr>
<td>areaField</td>
<td>'area'</td>
<td>地区(县区级)字段名</td>
</tr>
<tr>
<td>province</td>
<td>[无]</td>
<td>省份(省级),可以为地区名称</td>
</tr>
<tr>
<td>city</td>
<td>[无]</td>
<td>城市(地级),可以为地区名称</td>
</tr>
<tr>
<td>area</td>
<td>[无]</td>
<td>地区(县区级),可以为地区名称</td>
</tr>
<tr>
<td>required</td>
<td>true</td>
<td>是否必须选中(是否自动选择地区)</td>
</tr>
<tr>
<td>nodata</td>
<td>'hidden'</td>
<td>当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理</td>
</tr>
<tr>
<td>onChange</td>
<td>[无]</td>
<td>地区切换时触发,回调函数传入地区信息:province省份(省级)名称,city城市(地级)名称,area地区(县区级)名称</td>
</tr>
</tbody>
</table>
<h2>callback(api)参数</h2>
<table>
<thead>
<tr>
<th width="200">方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>getInfo(data)</td>
<td>获取当前选中的地区信息:province省份(省级)名称,city城市(地级)名称,area地区(县区级)名称,code地区编码</td>
</tr>
</tbody>
</table>
</div>
</div>

</body>
</html>

城市三级联动 AJAX-原生js封装的更多相关文章

第110天：Ajax原生js封装函数
一.Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHtt ...
ajax 原生js封装ajax [转]
/* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...
ajax原生js封装
不带注释的 function ajax(json) { json.type = json.type ? json.type : 'get'; json.async = json.async == fa ...
原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
全国城市三级联动 html+js
全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...
jquery 城市三级联动
js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...
转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
省市区(县)三级联动代码（js 数据源）
ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

随机推荐

selenium 自动化基础知识(各种定位)
元素的定位 webdriver 提供了一很多对象定位方法例如: [ id ] , name , class name , link text , partial link text , tag n ...
【CS Round #46 (Div. 1.5) C】Set Subtraction
[链接]h在这里写链接 [题意] 一开始有n个数字,然后有一个数字X,把每个数字都减去X,又生成N个新的数字. 然后把这2*N个数字混在一起. 告诉你这2*N个数字是什么.让你复原出原来的N个数字,以 ...
Altium Designer如何统一调整标号大小,在pcb环境下
CentOS7安装docker 18.06
原文:CentOS7安装docker 18.06 一.CentOS Docker 安装参考docker 官方网站:https://docs.docker.com/install/linux/dock ...
[D3] Margin Convention with D3 v4
You can’t add axes to a chart if you don’t make room for them. To that end, the D3 community has ado ...
apache-spark导入eclipse环境
工作中用到了apache-spark,想深入了解一下,决定从源码开始. 先导入到常用的ide,eclipse吧: 准备工作 1. 下载Eclipse:http://scala-ide.org/ 2. ...
JAVA中正則表達式总结（具体解释及用途）
很多语言,包含Perl.PHP.Python.JavaScript和JScript,都支持用正則表達式处理文本,一些文本编辑器用正則表達式实现高级"搜索-替换"功能.所以JAVA语 ...
UI 06 ScrollView 的手动循环播放与自己主动循环播放
假设想要循环播放的话, scrollView的照片前要加上最后一张图片, 最后要加上第一张图片. - (void)viewDidLoad { [super viewDidLoad]; // Do an ...
【心情】"支NMLGB配树”
大视野oj坏了那就做杭电呗看看大触都做杭电里的哪些题看到杭电的分类了 Tarjan算法诶,我好像会嘛,就是你了诶,怎么不是求强连通分量? 哦,原来是Tarjan算法的另外一个应用叫做支配树我 ...
[转] Python 爬虫的工具列表附Github代码下载链接
转自http://www.36dsj.com/archives/36417 这个列表包含与网页抓取和数据处理的Python库网络通用 urllib -网络库(stdlib). requests - ...

城市三级联动 AJAX-原生js封装

城市三级联动 AJAX-原生js封装的更多相关文章

随机推荐

热门专题