JScript实现地址选择功能


Posted in Javascript onAugust 15, 2017

本文实例为大家分享了JScript实现地址选择功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
      var shenArr = new Array(5);
      shenArr["广东"] = ["广州","深圳","韶关","汕头","茂名"];
      shenArr["湖南"] = ["长沙","张家界","株洲","岳阳","吉首"];
      shenArr["湖北"] = ["武汉","宜昌","荆州","黄冈","仙桃"];
      shenArr["安徽"] = ["合肥","黄山"];
      shenArr["河南"] = ["郑州","开封","洛阳","信阳"];
       function getShen(){
        var s = document.getElementById("shen");
        for(var v in shenArr){
          //把数组键加入到省的下拉框
          s.add(new Option(v,v),null);
        }
       }

      function getCity(){
        var s = document.getElementById("shen");
        var c = document.getElementById("city");
        var v = s.value;//省份的名称,也是数组中的键
        c.options.length = 0;//把城市下拉框中的项清除

        //循环把某一个省的城市加入到市的下拉框
        for(var i in shenArr[v] ){
          c.add(new Option(shenArr[v][i],shenArr[v][i]),null);
        }

      }

    </script>
  </head>
  <body onload="getShen()">
    省:<select id="shen" onchange="getCity()">
      <option value="0">--请选择--</option>
    </select>
    市:<select id="city"></select>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
Google 静态地图API实现代码
Nov 19 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
js中有关IE版本检测
Jan 04 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 #jQuery
关于vue.js发布后路径引用的问题解决
Aug 15 #Javascript
JavaScript中使用Async实现异步控制
Aug 15 #Javascript
使用jQuery实现购物车结算功能
Aug 15 #jQuery
javascript兼容性(实例讲解)
Aug 15 #Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 #Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
Python编写登陆接口的方法
2017/07/10 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Python使用OpenCV进行标定
2018/05/08 Python
python检索特定内容的文本文件实例
2018/06/05 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
Python 3 判断2个字典相同
2019/08/06 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Python守护进程实现过程详解
2020/02/10 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
python简单的三元一次方程求解实例
2020/04/02 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
高中生期末评语大全
2014/01/28 职场文书
团日活动策划书
2014/02/01 职场文书
培训研修方案
2014/06/06 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
React Fragment介绍与使用详解
2021/11/11 Javascript