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 ...
随机推荐
- SpriteBuilder使用Shader Effect的另一种方法
记住你并不是必须要使用Effect节点去给一个特定的精灵应用效果. 你只要选择一个精灵然后切换至项目属性窗口(Item Properties tab),找到effects用户接口在CCSprite属性 ...
- Android中SQLiteOpenHelper类的onUpgrade方法浅谈
public abstract void onUpgrade(SQLiteDatabase db,int oldVersion,int new Version) 这个方法在实现时需要重写. onUpg ...
- Customer Form Issue: Automatic Matching Rule Set Defaults Value AutoRuleSet-1
In this Document Symptoms Changes Cause Solution References APPLIES TO: Oracle Receivables ...
- jsp中的tag与tld
转载自: http://www.cnblogs.com/fanzi2009/archive/2010/04/08/1707888.html 在jsp文件中,可以引用tag和tld文件. 1.对于ta ...
- LDA主题模型
(一)LDA作用 传统判断两个文档相似性的方法是通过查看两个文档共同出现的单词的多少,如TF-IDF等,这种方法没有考虑到文字背后的语义关联,可能在两个文档共同出现的单词很少甚至没有,但两个文档是相似 ...
- Android高级控件（四）——VideoView 实现引导页播放视频欢迎效果，超级简单却十分的炫酷
Android高级控件(四)--VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷 是不是感觉QQ空间什么的每次新版本更新那炫炫的引导页就特别的激动,哈哈,其实他实现起来真的很简单很 ...
- RecyclerView 实现gallery画廊效果
1.RecyclerView的基本用法 首先主Activity的布局文件: [html] view plaincopy <RelativeLayout xmlns:android="h ...
- ITU-T Technical Paper： NP, QoS 和 QoE的框架以及它们的区别
本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...
- PS图像特效算法——百叶窗
这个只要设置好条纹的宽度和条纹的间隔,建立一个遮罩层,等间隔的对原图进行等间距的遮罩. clc; clear all; Image=imread('4.jpg'); Image=double(Imag ...
- hbase mlockall
mlockall 头文件:#include <sys/mman.h> 函数原型:int mlockall(int flags); flags: MCL_CURRENT --Lo ...