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 ...
随机推荐
- Dynamics CRM 2011/2013 DeveloperToolkit的使用
Dynamic CRM 2011的SDK中提供了一个叫DeveloperToolkit的工具,他的用途官方说明说的很明确,能方便开发者在VS中直接部署webresource.plugin.workfl ...
- python模块：调用系统命令模块subprocess等
http://blog.csdn.net/pipisorry/article/details/46972171 Python经常被称作"胶水语言",因为它能够轻易地操作其他程序,轻 ...
- Android Studio环境下搭建ReactNative
1.安装Android Studio首先肯定是 安装Android Studio(包含SDK)(国内推荐)ps:这里有一点要注意,需要为SDK配置环境变量,名称必须为ANDROID_HOME 2.安装 ...
- 《java入门第一季》之面向对象（构造方法）
/* 构造方法: 给对象的数据进行初始化 格式: A:方法名与类名相同 B:没有返回值类型,连void都没有 C:没有具体的返回值 */ class Student { private String ...
- How to Simulate the Price Order or Price Line Function using API QP_PREQ_PUB.PRICE_REQUEST Includes
How to Simulate the Price Order or Price Line Function using API QP_PREQ_PUB.PRICE_REQUEST Includes ...
- SpriteBuilder中的loadAsScene:方法的返回值
见如下代码: CCScene *scene = [CCBReader loadAsScene:@"GameScene"]; GameScene *gameScene = (Game ...
- hbase 集群管理脚本
#!/bin/bash # Show all running Java processes on region servers. Must run on master using HBase owne ...
- SSH框架项目开发命名规范
SSH 框架项目开发命名规范 一.各层包及类命名规范 总体原则:包名所有字母小写,类名采用 "驼峰标识",具体如下: 1. Action 类 包命名规范:co ...
- Nginx常用模块安装命令
将目录切换至Nginx安装包目录下,使用./configure命令进行安装.一些第三方模块需要先下载过来,指定下解压后的目录即可. ./configure --prefix=/usr/local/ng ...
- python JoinableQueue在生产者消费者项目中的简单应用
class multiprocessing.JoinableQueue([maxsize]) JoinableQueue, a Queue subclass, is a queue which add ...