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第一课
Feb 27 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
我所理解的JavaScript中的this指向
Sep 04 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图片加中文水印实现代码分享
2012/10/31 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
详解javascript void(0)
2020/07/13 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
Python3实现并发检验代理池地址的方法
2016/09/18 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python简单区块链模拟详解
2019/07/03 Python
Python如何实现邮件功能
2020/05/27 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
信息部岗位职责
2013/11/12 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
幼师辞职信范文
2015/02/27 职场文书
小学感恩主题班会
2015/08/12 职场文书