tshi0912 / city-picker Goto Github PK
View Code? Open in Web Editor NEW下拉面板式省市区三级联动jquery插件,视觉更清爽,交互体验更友好。
Home Page: http://tshi0912.github.io/city-picker/
License: MIT License
下拉面板式省市区三级联动jquery插件,视觉更清爽,交互体验更友好。
Home Page: http://tshi0912.github.io/city-picker/
License: MIT License
如何通过value查出text来呢?
比如130000/130500/130523
查出河北省,邢台市,内丘县来
有国家联动的demo吗?
完成选择后的回调有没有?
请问一下, 有不有根据code能直接取出对应的值?
效率上,是不是存在这个问题
1、当如选择完成以后,时候可以添加一个回掉函数?
2、既然是插件,文本框就应该是客户端自己来定义,插件不用定义吧,感觉span是多余的。
现在city-picker只有**地区,假如说要使用国外地区,该要如何使用,不能重新加载页面,通过页面上某个地方直接改变city-picker需要的数据并且重新加载.这样的需求能够做到嘛 ? 求大神解答。
由于是自适应的,如果是与bootstrap的modal结合起来,会自动变的很宽,modal的宽度会自动添加滚动条
建议在open()方法中计算位置,初始化时计算位置,依赖周围的元素,假如周围的元素在初始化时更改了height或者left,那么位置必然影响。
参考了render方法的实现,open方法改为
open: function (type) {
type = type || PROVINCE;
//////////////////////更改代码开始//////////////////////////
//每次打开时在计算位置
var preSpan = this.$dropdown.prev("span.city-picker-span");
var position = preSpan.position();
var top = position.top;
var left = position.left;
var height= preSpan.outerHeight();
this.$dropdown.css("top",top+height);
this.$dropdown.css("left",left);
///////////////////////更改代码结束/////////////////////////////////
this.$dropdown.show();
this.$textspan.addClass('open').addClass('focus');
this.tab(type);
}
提交到服务器的数据默认是"安徽省/合肥市/瑶海区",怎样配置能使提交过去的数据变为对应的省市区code?找了文档没找到。。。。
我在做一个网站,然后用到您的插件,想请假选取了地址之后,如何获得我选的值?
不太清楚操作,恳请大牛能说详细点,谢谢!
如何使用ID而不是中文名进行初始赋值?
$citypicker2.citypicker({
province: '江苏省',
city: '常州市',
district: '溧阳市'
});
变成
$citypicker2.citypicker({
province: '320000',
city: '320400',
district: '320481'
});
请问选择后怎么取到值呢,新手麻烦指点下。看文档里没有说。
我请求完数据将省市填上去,但是在页面加载的时候dom已被初始化,导致city-picker.js里面
if (!data) {
if (/destroy/.test(option)) {
return;
}
options = $.extend({},$this.data(), $ .isPlainObject(option) && option);
$this.data(NAMESPACE, (data = new CityPicker(this, options)));
}
data已经有对象,所以不执行设置。
异步请求如下:
api.post("account", "single", { key: "123" }, function (result) {
$("#city-picker").citypicker({
province: result.returnValue.province,
city: result.returnValue.city
});
});
$citypicker3.citypicker({
province: '北京市',
city: '北京市',
district: '海淀区'
});
以上这个就是可以的。
$citypicker3.citypicker({
province: '110000',
city: '110100',
district: '110108'
});
以上这个为啥就不行。这里的编码是指从后台获取的
在使用city-picker中发现他在选择地址名过长的时候会顺延到下一行,这样就导致原来的页面布局乱掉了。
更为致命的是,好像city-picker只有在初始时确定了宽度,无法通过改变原input标签的宽度来改变city-picker组件的宽度。
望大神看到后能给个解决方法。
当城市名太长会溢出到下一行,是个bug吧
现在有个需求,有的页面只需要省份和城市,有的省份、城市、区县都显示,有参数可以设置控制么,求助。。
终于找到想要的交互效果了!
Thx, you are an awesome guy.
本意是省市区都为必填项,所以设置了默认值,但是如果用户点击修改了省,这时候市和区都被清空掉了,此时点击空白处,则可以完全不填入市和区
我试过getVal()和getText()等方法,可都不好使,change事件也没有响应,首页的文档里也没有提到这些,可否给一个如何取值的例子?谢谢!
比如
document.form1.submit();
数据为了统一,想从数据库中查询,拼装,不知道可以吗? 可以的话如何拼装呢
如题,我现在存储了选择是的code值,如何根据code再取到对应的中文值。
封装好的vue 或者react的包
没有任何回调函数,在实际使用上会有很多问题
希望加入onChange, onClose, onOpen等回调函数
在使用过程中对你原有的改动:
1.省市区从淘宝获取
2.增加改名/合并后的市或者区县
3.对加改名/合并后的市或者区县用横线分割(例如:江苏 苏州 市下的)
在使用过程中也发现了很多问题:
1.样式问题,上级或上层设置了文字,图片,等等的样式,会直接影响插件内的样式
楼主,你好。
请问一下这个组件可以在手机端使用吗,我用iphone手机打开点击input没有显示选择框。
Bower 上找不到你的包,有一段时间通过“bower install city-picker -save-dev” 能直接安装。最近又不行了!!!是何原因?
和JQuery的DataTables在同一页面使用,调用不到重置函数--citypicker('destroy')。两者都需要引用一个jquery.js,是不是冲突了,如果是的话,该怎么办呢?
可不可以在控件里面加个不限 城市区域 或者产业区域
您好,用了您的插件之后,有一个需求,根据code码显示地区,类似
<input class="form-control" readonly style="width: 100%;" type="text" value="" data-toggle="city-picker" code="440113">
就能显示地区在input的value上了,事先没经过您的同意,改了下源码。。
https://github.com/zhoumingque/CityPickerPlus
如题,后台必须传过来地区名么?
当把放有city-picker的form-horizontal放入collapse中时,city-picker样式会出现变形
<span class="city-picker-span" style="width:1841px;height:34px;line-height:33px;"><span class="placeholder" style="display: none;">点击从下拉面板中选择省/市</span><span class="title" style="display: inline;"><span class="select-item" data-count="province" data-code="130000">河北省</span>/<span class="select-item" data-count="city" data-code="130300">秦皇岛市</span></span><div class="arrow"></div></span>
生成的city-picker-span的style的width竟然达到了1841px
用低版本的JQ可以兼容IE7吗
偶们只需要两级。
谢谢!
"460200" : {
"460200" : "三亚湾",
"441900" : {
"441900" : "三元里"
},
"442000" : {
"442000" : "湖滨北路"
}
这几个数据,可能有问题,会引起递归循环错误。
貌似跟jquery-ui有冲突 请问如何解决
数据源可否从数据库提供?可否提供一行配置,来配置数据源,我看到city-picker.data.js里面只是返回了一行变量,这个变量是个JSON的多维数组,但是ID前缀似乎不是很适合从数据库返回数据源。
According to the introduction of Readme file, console warrning , Uncaught ReferenceError: ChineseDistricts is not defined
如标题所述
ajax请求后,获得需要选中的省市区内容,此时应如何修改citypicker的选中值?有没有对应方法?如何调用?
{
"A-G": [
{
"code": "340000",
"address": "安徽省"
},
{
"code": "820000",
"address": "澳门特别行政区"
},
{
"code": "110000",
"address": "北京"
},
{
"code": "350000",
"address": "福建省"
},
{
"code": "620000",
"address": "甘肃省"
},
{
"code": "440000",
"address": "广东省"
},
{
"code": "450000",
"address": "广西壮族自治区"
},
{
"code": "520000",
"address": "贵州省"
}
],
"H-K": [
{
"code": "460000",
"address": "海南省"
},
{
"code": "130000",
"address": "河北省"
},
{
"code": "410000",
"address": "河南省"
},
{
"code": "230000",
"address": "黑龙江省"
},
{
"code": "420000",
"address": "湖北省"
},
{
"code": "430000",
"address": "湖南省"
},
{
"code": "220000",
"address": "吉林省"
},
{
"code": "320000",
"address": "江苏省"
},
{
"code": "360000",
"address": "江西省"
}
],
"L-S": [
{
"code": "210000",
"address": "辽宁省"
},
{
"code": "150000",
"address": "内蒙古自治区"
},
{
"code": "640000",
"address": "宁夏回族自治区"
},
{
"code": "630000",
"address": "青海省"
},
{
"code": "370000",
"address": "山东省"
},
{
"code": "140000",
"address": "山西省"
},
{
"code": "610000",
"address": "陕西省"
},
{
"code": "310000",
"address": "上海"
},
{
"code": "510000",
"address": "四川省"
}
],
"T-Z": [
{
"code": "710000",
"address": "**省"
},
{
"code": "120000",
"address": "天津"
},
{
"code": "540000",
"address": "西藏自治区"
},
{
"code": "810000",
"address": "香港特别行政区"
},
{
"code": "650000",
"address": "**维吾尔自治区"
},
{
"code": "530000",
"address": "云南省"
},
{
"code": "330000",
"address": "浙江省"
},
{
"code": "500000",
"address": "重庆"
}
]
}
香港、澳门、**下好像没有对应的code? 然后我尝试着在省级放香港、澳门、**,发现如果只有一级的话点击了香港(或者任意一个)后、剩余的两个再点击都没有响应
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.