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字符串处理性能的代码
Dec 07 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
咖啡的化学
2021/03/03 咖啡文化
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
php实现的短网址算法分享
2014/06/20 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
javascript中的几个运算符
2007/06/29 Javascript
DHTML Slide Show script图片轮换
2008/03/03 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
Python实现多线程抓取妹子图
2015/08/08 Python
python实现Windows电脑定时关机
2018/06/20 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
Python 如何在字符串中插入变量
2020/08/01 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
银行实习的自我鉴定
2013/12/10 职场文书
出纳员岗位责任制
2014/02/11 职场文书
行政办公室岗位职责
2014/03/18 职场文书
放飞理想演讲稿
2014/09/09 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
python3 字符串str和bytes相互转换
2022/03/23 Python
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android