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 ...
随机推荐
- Linux多线程编程初探
Linux线程介绍 进程与线程 典型的UNIX/Linux进程可以看成只有一个控制线程:一个进程在同一时刻只做一件事情.有了多个控制线程后,在程序设计时可以把进程设计成在同一时刻做不止一件事,每个线程 ...
- 【Visual C++】游戏编程学习笔记之一：五毛钱特效之透明和半透明处理
本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44163799 作者:ZeeCod ...
- mahout系列----Dirichlet 分布
Dirichlet分布可以看做是分布之上的分布.如何理解这句话,我们可以先举个例子:假设我们有一个骰子,其有六面,分别为{1,2,3,4,5,6}.现在我们做了10000次投掷的实验,得到的实验结果是 ...
- how tomcat works 读书笔记 十一 StandWrapper 上
方法调用序列 下图展示了方法调用的协作图: 这个是前面第五章里,我画的图: 我们再回顾一下自从连接器里 connector.getContainer().invoke(request, resp ...
- jfinal的回滚
有两种方法 1. @Before(Tx.class) public void test() throws Exception { } 优点:简单,不需要去处理每个异常,直接抛出异常: 缺点:不能详细的 ...
- java 深入理解内部类以及之间的调用关系
什么是内部类 内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和 ...
- java实习面试题（阿里一面）
1.抽象类和接口的不同点: 抽象类可以有构造函数,接口中不能有构造函数: 抽象类中可以有普通成员变量,但是接口中不能有普通成员变量: 抽象类中可以包含非抽象的普通方法,但是接口中必须是抽象方法:(jd ...
- combination sum、permutation、subset(组合和、全排列、子集)
combination sum I.permutation I.subsets I 是组合和.全排列.子集的第一种情况,给定数组中没有重复的元素. combination sum II.permut ...
- Mybatis与Ibatis比较
随着开发团队转投Google Code旗下,ibatis3.x正式更名为Mybatis 虽然从正式版发布至今也有近一年时间,官方也非常友好的提供了中文版的使用手册,不过相信很多人还在项目中使用iba ...
- Oracle12c中性能优化&功能增强新特性之临时undo
临时表最有意思的特点之一是undo段也存储在常规undo表空间中,而它们的undo反过来被redo保护,这会导致一些问题. 1) 写undo表空间需要数据库以读写模式打开,因此,只读数据库和物理备库 ...