city-picker插件使用-移动h5三级联动
首先访问该链接：http://www.jq22.com/jquery-info12914
看看是否是你要找的三级联动插件，(主要看注释的部分！)
好了，不知道是不是我傻，没有找到初始化数据的方法，本人只能直接格式化一下代码，直接改源码，总之呢，三个地方要改动，看源码：
修改：city-picker.min.js
// jshint ignore: start
+
function(e) {
//开发时，直接把数据库数据设置给rawCitiesData，注意，这里要转json对象，不是json字符串。
e.rawCitiesData = [{//全国的数据太长，只能先放一个北京
name: "北京",
code: "110000",
sub: [{
name: "北京市",
code: "110000",
sub: [{
name: "东城区",
code: "110101"
}]
}]
}]
} ($),
+
function(e) {
"use strict";
var n, a = e.rawCitiesData,
c = function(e) {
for (var n = [], a = 0; a < e.length; a++) {
var c = e[a];
//注意，这里过滤条件，比如：北京是的二级是市辖区，如果不把'市辖区'这个条件去掉，那么，市辖区下的所有数据就没有了。
/^请选择|市辖区/.test(c.name) || n.push(c)
}
return n.length ? n: []
},
o = function(e) {
return e.sub ? c(e.sub) : [{
name: "",
code: e.code
}]
},
m = function(e) {
for (var n = 0; n < a.length; n++) if (a[n].code === e || a[n].name === e) return o(a[n]);
return []
},
d = function(e, n) {
for (var c = 0; c < a.length; c++) if (a[c].code === e || a[c].name === e) for (var m = 0; m < a[c].sub.length; m++) if (a[c].sub[m].code === n || a[c].sub[m].name === n) return o(a[c].sub[m])
},
u = function(e) {
var n, c, o = a[0],
m = e.split(" ");
return a.map(function(e) {
e.name === m[0] && (o = e)
}),
o.sub.map(function(e) {
e.name === m[1] && (n = e)
}),
m[2] && n.sub.map(function(e) {
e.name === m[2] && (c = e)
}),
c ? [o.code, n.code, c.code] : [o.code, n.code]
};
e.fn.cityPicker = function(c) {
return c = e.extend({},
n, c),
this.each(function() {
var n = this,
s = a.map(function(e) {
return e.name
}),
b = a.map(function(e) {
return e.code
}),
t = o(a[0]),
r = t.map(function(e) {
return e.name
}),
i = t.map(function(e) {
return e.code
}),
l = o(a[0].sub[0]),
f = l.map(function(e) {
return e.name
}),
p = l.map(function(e) {
return e.code
}),
v = s[0],
h = r[0],
V = f[0],
y = [{
displayValues: s,
values: b,
cssClass: "col-province"
},
{
displayValues: r,
values: i,
cssClass: "col-city"
}];
c.showDistrict && y.push({
values: p,
displayValues: f,
cssClass: "col-district"
});
var g = {
cssClass: "city-picker",
rotateEffect: !1,
formatValue: function(e, n, a) {
return a.join(" ")
},
onChange: function(a, o, u) {
var s, b = a.cols[0].displayValue;
if (b !== v) {
var t = m(b);
s = t[0].name;
var r = d(b, s);
return a.cols[1].replaceValues(t.map(function(e) {
return e.code
}), t.map(function(e) {
return e.name
})),
c.showDistrict && a.cols[2].replaceValues(r.map(function(e) {
return e.code
}), r.map(function(e) {
return e.name
})),
v = b,
h = s,
a.updateValue(),
!1
}
if (c.showDistrict && (s = a.cols[1].displayValue, s !== h)) {
var i = d(b, s);
return a.cols[2].replaceValues(i.map(function(e) {
return e.code
}), i.map(function(e) {
return e.name
})),
h = s,
a.updateValue(),
!1
}
e(n).attr("data-code", o[o.length - 1]),
e(n).attr("data-codes", o.join(",")),
c.onChange && c.onChange.call(n, a, o, u)
},
cols: y
};
if (this) {
var C = e.extend({},
c, g),
w = e(this).val();
//注意，这里是默认显示第一个省的三级联动，而且是必须的，如果匹配不到，会报错二级联动没有被定义（坑！）
//这个'北京 北京市 东城区'条件改成：自己数据库中的第一个省的三级联动名称即可，比如你想要把北京显示在默认上（当然，最好是json数组对象的第一个省）
//替换下面的判断条件：北京市 市辖区 东城区(判断条件要与你数据一致，不然回会报错,并且，默认显示的条件也要与动态的数据一致)
if (w || (w = "北京市 市辖区 东城区"), v = w.split(" ")[0], h = w.split(" ")[1], V = w.split(" ")[2], w) {
if (C.value = u(w), C.value[0]) {
var D = m(C.value[0]);
C.cols[1].values = D.map(function(e) {
return e.code
}),
C.cols[1].displayValues = D.map(function(e) {
return e.name
})
}
if (C.value[1]) {
if (c.showDistrict) {
var k = d(C.value[0], C.value[1]);
C.cols[2].values = k.map(function(e) {
return e.code
}),
C.cols[2].displayValues = k.map(function(e) {
return e.name
})
}
} else if (c.showDistrict) {
var k = d(C.value[0], C.cols[1].values[0]);
C.cols[2].values = k.map(function(e) {
return e.code
}),
C.cols[2].displayValues = k.map(function(e) {
return e.name
})
}
}
e(this).picker(C)
}
})
},
n = e.fn.cityPicker.prototype.defaults = {
showDistrict: !0
}
} ($);
初始化HTML页面：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="jquery-weui.min.css" />
<style>
#city-picker{
margin-left: 40%;
margin-right: 20%;
margin-top: 20%;
width: 200px;
height: 40px;
}
</style>
</head>
<body> <input type='text' id='city-picker' placeholder='请选择省市区县' />
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-weui.min.js"></script>
<script type="text/javascript" src="city-picker.min.js"></script>
<script>
$("#city-picker").cityPicker({
title: "选择省市区/县",
onChange: function (picker, values, displayValues) {//选择后触发的事件
console.log(values, displayValues);
}
});
</script>
</body>
</html>
问题来了，插件怎么回显呢：
笨办法一个，现在隐藏域把回显的数据显示在下拉上，这一步主要给用户看到一个同步的效果，然后改js：第一步的js还需要改动：
修改后的：
// jshint ignore: start
+
function(e) {
//开发时，直接把数据库数据设置给rawCitiesData，注意，这里要转json对象，不是json字符串。
e.rawCitiesData = [{
name: "北京",
code: "110000",
sub: [{
name: "北京市",
code: "110000",
sub: [{
name: "东城区",
code: "110101"
}]
}]
}]
} ($),
+
function(e) {
"use strict";
var n, a = e.rawCitiesData,
c = function(e) {
for (var n = [], a = 0; a < e.length; a++) {
var c = e[a];
//注意，这里过滤条件，比如：北京是的二级是市辖区，如果不把'市辖区'这个条件去掉，那么，市辖区下的所有去就没有了。
/^请选择|市辖区/.test(c.name) || n.push(c)
}
return n.length ? n: []
},
o = function(e) {
return e.sub ? c(e.sub) : [{
name: "",
code: e.code
}]
},
m = function(e) {
for (var n = 0; n < a.length; n++) if (a[n].code === e || a[n].name === e) return o(a[n]);
return []
},
d = function(e, n) {
for (var c = 0; c < a.length; c++) if (a[c].code === e || a[c].name === e) for (var m = 0; m < a[c].sub.length; m++) if (a[c].sub[m].code === n || a[c].sub[m].name === n) return o(a[c].sub[m])
},
u = function(e) {
var n, c, o = a[0],
m = e.split(" ");
return a.map(function(e) {
e.name === m[0] && (o = e)
}),
o.sub.map(function(e) {
e.name === m[1] && (n = e)
}),
m[2] && n.sub.map(function(e) {
e.name === m[2] && (c = e)
}),
c ? [o.code, n.code, c.code] : [o.code, n.code]
};
e.fn.cityPicker = function(c) {
return c = e.extend({},
n, c),
this.each(function() {
var n = this,
s = a.map(function(e) {
return e.name
}),
b = a.map(function(e) {
return e.code
}),
t = o(a[0]),
r = t.map(function(e) {
return e.name
}),
i = t.map(function(e) {
return e.code
}),
l = o(a[0].sub[0]),
f = l.map(function(e) {
return e.name
}),
p = l.map(function(e) {
return e.code
}),
v = s[0],
h = r[0],
V = f[0],
y = [{
displayValues: s,
values: b,
cssClass: "col-province"
},
{
displayValues: r,
values: i,
cssClass: "col-city"
}];
c.showDistrict && y.push({
values: p,
displayValues: f,
cssClass: "col-district"
});
var g = {
cssClass: "city-picker",
rotateEffect: !1,
formatValue: function(e, n, a) {
return a.join(" ")
},
onChange: function(a, o, u) {
var s, b = a.cols[0].displayValue;
if (b !== v) {
var t = m(b);
s = t[0].name;
var r = d(b, s);
return a.cols[1].replaceValues(t.map(function(e) {
return e.code
}), t.map(function(e) {
return e.name
})),
c.showDistrict && a.cols[2].replaceValues(r.map(function(e) {
return e.code
}), r.map(function(e) {
return e.name
})),
v = b,
h = s,
a.updateValue(),
!1
}
if (c.showDistrict && (s = a.cols[1].displayValue, s !== h)) {
var i = d(b, s);
return a.cols[2].replaceValues(i.map(function(e) {
return e.code
}), i.map(function(e) {
return e.name
})),
h = s,
a.updateValue(),
!1
}
e(n).attr("data-code", o[o.length - 1]),
e(n).attr("data-codes", o.join(",")),
c.onChange && c.onChange.call(n, a, o, u)
},
cols: y
};
if (this) {
var C = e.extend({},
c, g),
w = e(this).val();
//注意，这里是默认显示第一个省的三级联动，而且是必须的，如果匹配不到，会报错二级联动没有被定义（坑！）
//这个'北京 北京市 东城区'条件改成：自己数据库中的第一个省的三级联动名称即可，比如你想要把北京显示在默认上（当然，最好是json数组对象的第一个省）
//替换下面的判断条件：北京市 市辖区 东城区（判断条件要与默认显示的数据一致，不然回报错，并且，默认的条件也要和动态的数据一致）
var defaultDatas = "北京市 市辖区 东城区";//初始化默认的显示数据
if($("#ds").val()){//回显的数据--数据库的数据
defaultDatas = $("#ds").val();
}
if (w || (w = defaultDatas), v = w.split(" ")[0], h = w.split(" ")[1], V = w.split(" ")[2], w) {
if (C.value = u(w), C.value[0]) {
var D = m(C.value[0]);
C.cols[1].values = D.map(function(e) {
return e.code
}),
C.cols[1].displayValues = D.map(function(e) {
return e.name
})
}
if (C.value[1]) {
if (c.showDistrict) {
var k = d(C.value[0], C.value[1]);
C.cols[2].values = k.map(function(e) {
return e.code
}),
C.cols[2].displayValues = k.map(function(e) {
return e.name
})
}
} else if (c.showDistrict) {
var k = d(C.value[0], C.cols[1].values[0]);
C.cols[2].values = k.map(function(e) {
return e.code
}),
C.cols[2].displayValues = k.map(function(e) {
return e.name
})
}
}
e(this).picker(C)
}
})
},
n = e.fn.cityPicker.prototype.defaults = {
showDistrict: !0
}
} ($);
回显的html：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="jquery-weui.min.css" />
<style>
#city-picker{
margin-left: 40%;
margin-right: 20%;
margin-top: 20%;
width: 200px;
height: 40px;
}
</style>
</head>
<body> <input type='text' id='city-picker' value="湖南省 长沙市 芙蓉区" placeholder='请选择省市区县' />
<input type="text" id="ds" name="" value="湖南省 长沙市 芙蓉区"><!-- 这里使用隐藏域 -->
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-weui.min.js"></script>
<script type="text/javascript" src="city-picker.min.js"></script>
<script> $("#city-picker").cityPicker({
title: "选择省市区/县",
onChange: function (picker, values, displayValues) {
console.log(values, displayValues);
}
});
</script>
</body>
</html>
总得来说，这应该是封装过的js，有可能别人有方法初始化动态数据或者回显数据，只是我这边比较捉急，没时间在网络上各种搜索了，直接看源码...
欢迎各位大神丢板砖，提意见。嘿嘿嘿~~~
city-picker插件使用-移动h5三级联动的更多相关文章
- 插件 原生js 省市区 三级联动 源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）
1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...
- python-Web-django-时间插件-三级联动
时间插件: 第一步:下载 https://www.layui.com/laydate/ 下载插件包,放在项目的static 第二步:在html里引入js: <script src="/ ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
- Mint-UI Picker 三级联动
Mint-UI Picker组件的三级联动 HTML: <mt-picker :slots="slots" value-key="name" @chang ...
- 用mint-ui picker组件 实现省市区三级联动
公司上一期项目中新增了省市区滑动三级联动效果,用的是mint-ui的picker组件和popup组件,效果如下:点击确定换地区,点击取消不变 省市区数据是后台给的(根据上一级的id,获取下一级数据列表 ...
- jquery全国省市区三级联动插件distpicker
使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...
- 中国省市区地址三级联动插件---jQuery Distpicker
插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...
随机推荐
- RHEL6.4上升级python从2.6.6到2.7.3
RHEL6.4上升级python从2.6.6到2.7.3 原始安装好的redhat6.4上的python版本是2.6.6,不能满足实际需要.升级的方法很多,从源码升级或者从rpm包升级.其中从rpm包 ...
- 【一天一道LeetCode】#13. Roman to Integer
一天一道LeetCode系列 (一)题目 Given a roman numeral, convert it to an integer. Input is guaranteed to be with ...
- java注解及在butternife中的实践和原理
1. 背景 之前去一个公司,说到了java的注解,问java的注解有几种方式,然后我提到了android中的butternife和afinal注解工具,我们知道butternife在6.1版本的时候 ...
- 学习C++模板，初体验
最近,看了很多码神级人物的代码,发现其代码很炫酷,尤其对模板的使用,作为小码农,感觉已经落伍了,所以应该发奋图强,好好学习和掌握模板这个东西. 模板是什么呢?有人说一个模板就是一个创建类或函数的蓝图或 ...
- PS 图像调整算法——阈值
PS里面这个算法,先将图像转成灰度图像,然后根据给定的阈值,大于该阈值的像素赋值为1,小于该阈值的赋值为0. if x>T, x=1; if x<T, x=0; 原图: 效果图:阈值为 1 ...
- MFC中char*,string和CString之间的转换
MFC中char*,string和CString之间的转换 一. 将CString类转换成char*(LPSTR)类型 方法一,使用强制转换.例如: CString theString( &q ...
- leetcode(57)- Implement strStr()
题目: Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if ne ...
- 阅读源码(IV)
往期系列: <由阅读源码想到> <由阅读源码想到 | 下篇> <阅读源码(III)> Eric S.Raymond的写于2014年的<How to learn ...
- 9.3.3 scrapy 框架
scrapy是一个非常好用的Web爬虫框架,非常适合抓取Web站点从网页中提取结构化的数据,并且支持自定义的需求.在使用scrapy爬取网页数据时,除了熟悉HTML标签,还需要了解目标网页的数据组织结 ...
- oracle的for和i++
很长时间没用oracle的储存了,这次用到一次i++i++的sql语句:declarei_1 number(30) :=0;begin i_1 :=i_1+1;//i_1=1 insert into ...