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 ...
随机推荐
- C#之概述
当前流行的开发语言概述 C#是微软公司为Visual Studio开发平台推出的一种简洁.类型安全的面向对象的编程语言,开发人员可以通过她编写在.NET Framework上运行的各种安全可靠的应用程 ...
- startService与bindService的区别
转自:http://www.devdiv.com/thread-52226-1-1.html Service的生命周期方法比Activity少一些,只有onCreate, onStart, onDes ...
- WebService开发指南
WebServiceInAurora Web Service Web Service是一种面向服务的架构的技术,通过标准的Web协议提供服务,目的是保证不同平台的应用服务可以互操作.在Aurora框架 ...
- Struts的取值与标签
首先,我们都知道,在struts2中有一个valuestack.里面存放的就是action里的属性.同时,还有一个stackcontext,里面放的是map形式的request/session/att ...
- 第一个Polymer应用 - (2)创建你自己的元素
原文链接: Step 2: Your own element翻译日期: 2014年7月6日翻译人员: 铁锚通过上一节的学习和实践, 您已经完成了一个基本的应用程序结构(application stru ...
- 解决os x下gdb不能调试的问题
在较新的os x中使用gdb调试程序会发生 Unable to find Mach task port 之类的错误,这是由于新的os x内核禁止未授权的程序随意控制其他进程,如果不用root权限的话, ...
- Markdown语法及编辑器
宗旨 Markdown 的目标是实现「易读易写」. 可读性,无论如何,都是最重要的.一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成. ...
- C语言二维数组实现扫雷游戏
#include<stdio.h> //使用二维数组实现 扫雷 int main() { char ui[8][8]={ '+','+','+','+','+','+','+','+', ...
- LeetCode(53)-Binary Tree Paths
题目: Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree ...
- iOS开发常用第三方库
UI 动画 网络相关 Model 其他 数据库 缓存处理 PDF 图像浏览及处理 摄像照相视频音频处理 响应式框架 消息相关 版本新API的Demo 代码安全与密码 测试及调试 AppleWatch ...