伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:韦德1946手机版客户端-选择框
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容10
更新时间:2018/2/6 下午12:24:48更新说明:修复无区地级市的选择问题

前言

最近在做移动端项目的时候遇到了省市区选择的功能。以往做项目时都是省市区分开的下拉框样式。这次希望实现效果图要求的级联选择器。我是 Framework7 框架的忠实粉丝,庆幸的是 Framework7 已经有模拟 iOS 选择框效果的 Picker 组件。在开发之前我先搜索了现有的一些选择器伟德BETVICTOR,整体而言都能满足需求但都不完美,比如滑动不流畅、显示有 Bug 等等。

Picker 级联选择器

基于 Framework7 制作级联选择器比较简单,关键是生成省市区数组以及省市区之间的联动。以下是 CityPicker 的基本参数设置:var pickerLocation = myApp.picker({     input: '#location',//选择器     rotateEffect: true,//设置旋转效果     toolbarTemplate: '',//自定义按钮     cols: [{             cssClass: 'f-s-14',//添加自定义类             width: 100,//列宽             textAlign: 'left',//对齐方式             values: province,//省数组             onChange: function(picker, province) {//联动方法             }         },         {             cssClass: 'f-s-14',//添加自定义类             width: 100,//列宽             textAlign: 'center',//对齐方式             values: city,//市数组             onChange: function(picker, city) {//联动方法             }         },         {             cssClass: 'f-s-14',//添加自定义类             width: 100,//列宽             textAlign: 'right',//对齐方式             values: area,//区数组         }     ] });其中省市区的格式都是基本数组,所以必须循环省市区数据生成相应的数组或者数据本身具有可以直接获取数组的结构。province = ['北京','天津','河北','山东',...] city = ['济南','青岛','淄博','滨州',...] area = ['滨城区','惠民县','阳信县','博兴县',...]

省市区数据结构

没有想到一个简单的问题,最后竟然扯到了数据结构。经过尝试和思考,最终出现了三种数据结构,而这些东西应该都不是新鲜事。鉴于学识有限,我只能浅尝辄止的对比三者的异同,以及给出自己循环数据的方法。1.无子父级关系的数组去年做项目时省市区数据并没有从接口读取,而是保存到一个 JS 文件中。以下是后台从数据库导出的原始省市区数据片段(2016 年的数据,应该比较全,我删除了香港、澳门及台湾)。[     {       "region_id": 11,       "region_name": "北京市",       "region_sort": 1,       "region_remark": "直辖市",       "pinyin": "beijingshi",       "py": "bjs",       "area_code": "110000",       "parent_id": 1,       "level": 1     },     {       "region_id": 12,       "region_name": "天津市",       "region_sort": 2,       "region_remark": "直辖市",       "pinyin": "tianjinshi",       "py": "tjs",       "area_code": "120000",       "parent_id": 1,       "level": 1     },     {       "region_id": 13,       "region_name": "河北省",       "region_sort": 3,       "region_remark": "省份",       "pinyin": "hebeisheng",       "py": "hbs",       "area_code": "130000",       "parent_id": 1,       "level": 1     },     ...     {       "region_id": 101,       "region_name": "北京市",       "region_sort": 1,       "region_remark": null,       "pinyin": "beijingshi",       "py": "bjs",       "area_code": "110100",       "parent_id": 11,       "level": 2     },     {       "region_id": 102,       "region_name": "天津市",       "region_sort": 2,       "region_remark": null,       "pinyin": "tianjinshi",       "py": "tjs",       "area_code": "120100",       "parent_id": 12,       "level": 2     },     {       "region_id": 105,       "region_name": "邯郸市",       "region_sort": 5,       "region_remark": null,       "pinyin": "handanshi",       "py": "hds",       "area_code": "130400",       "parent_id": 13,       "level": 2     },     ...   } ] 这个数据并没有明确的子父级关系,只能通过 parent_id 查找对应的省市。循环方式如下:/**  * [getProvince 获取省]  * @param  {[Object]} regions [省市区数据]  * @return {[Array]}          [省数组]  */ function getProvince(regions) {     $.each(regions, function() {         if (this.level === 1) {             province.push(this.region_name);         }     });     return province; } /**  * [getCity 获取市]  * @param  {[Object]} regions      [省市区数据]  * @param  {[String]} provinceName [省名]  * @return {[Array]}               [市数组]  */ function getCity(regions, provinceName) {     var province_id = 0,         cityArr = [];     $.each(regions, function() {         if (this.level === 1 && this.region_name === provinceName) {             province_id = this.region_id;             return false;         }     });     $.each(regions, function() {         if (this.level === 2 && this.parent_id === province_id) {             cityArr.push(this.region_name)         }     });     return cityArr; } /**  * [getArea 获取区]  * @param  {[Object]} regions      [省市区数据]  * @param  {[String]} provinceName [省名]  * @param  {[String]} cityName     [市名]  * @return {[Array]}               [区数组]  */ function getArea(regions, provinceName, cityName) {     var province_id = 0,         city_id = 0,         areaArr = [];     $.each(regions, function() {         if (this.level === 1 && this.region_name === provinceName) {             province_id = this.region_id;         }         if (this.level === 2 && this.region_name === cityName && this.parent_id === province_id) {             city_id = this.region_id;             return false;         }     });     $.each(regions, function() {         if (this.level === 3 && this.parent_id === city_id) {             areaArr.push(this.region_name)         }     });     return areaArr; }更多方法请参考http://www.cnblogs.com/nzbin/p/7754447.html
相关伟德BETVICTOR-选择框

自制小清新select伟德BETVICTOR

通过原生生成美化后的,分享给初学者
  选择框
 12621  69

jQuery首字母搜索全国省市区伟德BETVICTOR

一款简单实用的响应式首字母搜索全国省市区伟德BETVICTOR适合手机页面和网站页面
  选择框
 2645  8

城市选择器,仿猎聘,支持多选,单选

城市选择器,仿猎聘,支持多选,单选
  选择框
 16492  123

jQuery左右选择切换

左右选择切换,兼容主流浏览器
  选择框
 15229  62

讨论这个项目(11)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    叶上初阳 0
    2018/4/12 10:29:44
    市区的参数数组是要把所有的市和区按照一定json格式放进去吗?我这边后台是通过我传的省的id才能获取到对应的市。
        nzb3290
        2018/4/12 14:45:01
        其实这个伟德BETVICTOR(可能不太恰当)使用主要说明的就是这个问题,picker 组件只接受省市区数组,所以必须要进行格式转化,我比较了几种格式的 JSON,另外移动端这种选择方式最好还是不要请求接口,性能损耗太大,通过 onchange 事件应该也可以实现,但是可能会有问题,没有试过。
    回复
    Lucky_Zz 0
    2018/3/29 18:32:07
    怎么设置默认的省市区
        nzb3290
        2018/4/6 17:48:16
        参见官方网址文件内注释,有一个 value 参数可以设置
    回复
    风林火山 0
    2018/3/26 10:47:56
    引入js和css就可以用了吗?
        nzb3290
        2018/3/26 16:36:11
        是的,可以看一下 example 的引用
    回复
    ぃ饴染… 0
    2018/3/12 15:33:49
    可以只选择省市吗
        nzb3290
        2018/3/16 16:43:03
        可以的,详情可以参考 Framework7 picker 组件的文档,我在 github 上的 JS 文件中添加了省市区相关的注释,只要删除或注释掉区相关的代码就可以了。
    回复
    雨田君 0
    2017/11/10 12:20:06
    每次滑动都会获得值?
        nzb3290
        2017/11/10 18:04:43
        是啊
    回复
    胡亚倩 0
    2017/11/7 14:23:24
取消回复