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 相关文章推荐
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
js只执行1次的函数示例
Jul 20 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
vue之数据交互实例代码
Jun 20 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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将数据导入到Foxmail
2006/10/09 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
Python实现线程池代码分享
2015/06/21 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
python正则表达式之作业计算器
2016/03/18 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python属性和内建属性实例解析
2020/01/14 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
竞选班长演讲稿
2013/12/30 职场文书
大学生志愿者感言
2014/01/15 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年后勤工作总结
2014/11/18 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书