省市选择的简单实现(基于zepto.js)


Posted in Javascript onJune 21, 2016

效果如下:

省市选择的简单实现(基于zepto.js)

<div class="clList overflow-h mt75">
          <select class="pull-left cl-35 select01" id="cityParent">
            <option>请选择省</option>
          </select>
          <select class="pull-left cl-35 select02" id="city">
            <option>请选择市</option>
          </select>
        </div>
//测试数据
var _json = [ {
      "areas" : [ {
        "name" : "东城区"
      }, {
        "name" : "西城区"
      }, {
        "name" : "崇文区"
      }, {
        "name" : "宣武区"
      }, {
        "name" : "昌平区"
      }, {
        "name" : "朝阳区"
      }, {
        "name" : "海淀区"
      }, {
        "name" : "丰台区"
      }, {
        "name" : "石景山区"
      }, {
        "name" : "门头沟区"
      }, {
        "name" : "房山区"
      }, {
        "name" : "通州区"
      }, {
        "name" : "顺义区"
      }, {
        "name" : "大兴区"
      }, {
        "name" : "平谷区"
      }, {
        "name" : "怀柔区"
      }, {
        "name" : "密云县"
      }, {
        "name" : "延庆县"
      } ],
      "name" : "北京市"
    },{
      "areas" : [ {
        "name" : "合肥市"
      }, {
        "name" : "滁州市"
      }, {
        "name" : "蚌埠市"
      }, {
        "name" : "芜湖市"
      }, {
        "name" : "淮南市"
      }, {
        "name" : "淮北市"
      }, {
        "name" : "马鞍山市"
      }, {
        "name" : "安庆市"
      }, {
        "name" : "宿州市"
      }, {
        "name" : "阜阳市"
      }, {
        "name" : "亳州市"
      }, {
        "name" : "黄山市"
      }, {
        "name" : "铜陵市"
      }, {
        "name" : "宣城市"
      }, {
        "name" : "六安市"
      }, {
        "name" : "池州市"
      } ],
      "name" : "安徽省"
    }, {
      "areas" : [ {
        "name" : "福州市"
      }, {
        "name" : "厦门市"
      }, {
        "name" : "宁德市"
      }, {
        "name" : "莆田市"
      }, {
        "name" : "泉州市"
      }, {
        "name" : ">"
      }, {
        "name" : "漳州市"
      }, {
        "name" : "龙岩市"
      }, {
        "name" : "三明市"
      }, {
        "name" : "南平市"
      } ],
      "name" : "福建省"
    }, {
      "areas" : [ {
        "name" : "兰州市"
      }, {
        "name" : "临夏州"
      }, {
        "name" : "定西市"
      }, {
        "name" : "平凉市"
      }, {
        "name" : "庆阳市"
      }, {
        "name" : "武威市"
      }, {
        "name" : "金昌市"
      }, {
        "name" : "张掖市"
      }, {
        "name" : "酒泉市"
      }, {
        "name" : "嘉峪关市"
      }, {
        "name" : "天水市"
      }, {
        "name" : "陇南市"
      }, {
        "name" : "甘南州"
      }, {
        "name" : "白银市"
      } ],
      "name" : "甘肃省"
    }];
    function loadCityPar() {
      var cityPar = '<option value="0">请选择省</option>';
      var lenPar = _json.length;  //省市数量
      for(var i=0; i<lenPar; i++){
        var n = i + 1;
        cityPar += '<option value="'+n+'">'+_json[i].name+'</option>';

      }
      $('#cityParent').html(cityPar);
    }
    loadCityPar();

    $(page).on('change','#cityParent',function () {
      var index = $('#cityParent option').not(function(){ return !this.selected }).index();
      var i = index - 1;
      if(i >= 0){
        var city = '<option value="0">请选择市</option>';
        var len = _json[i].areas.length;
        for(var j=0; j<len; j++){
          var m = j + 1;
          city += '<option value="'+m+'">'+_json[i].areas[j].name+'</option>';
        }
        $('#city').html(city);
      }
    });
.wgyHospital .select01,.wgyHospital .select02{ padding-left:.3rem; padding-right:.3rem; height:1.6rem; line-height:1.6rem; border:1px solid #ccc; text-align:center;}
.wgyHospital .select01{ border-radius:.75rem 0 0 .75rem;}
.wgyHospital .select02{ border-radius:0 .75rem .75rem 0; border-left:none;}

以上就是小编为大家带来的省市选择的简单实现(基于zepto.js)的全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 #Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 #Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 #Javascript
Javascript类型系统之String字符串类型详解
Jun 21 #Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 #Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 #Javascript
jQuery获取元素父节点的方法
Jun 21 #Javascript
You might like
用PHP读取IMAP邮件
2006/10/09 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
python 数据加密代码
2008/12/24 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
python实现月食效果实例代码
2019/06/18 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
Python实现汇率转换操作
2020/05/03 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
Python计算信息熵实例
2020/06/18 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
培训专员岗位职责
2014/02/26 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
好媳妇事迹材料
2014/12/24 职场文书
会计工作岗位职责
2015/02/03 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS