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 相关文章推荐
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
Vue如何将页面导出成PDF文件
Aug 17 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和ACCESS写聊天室(五)
2006/10/09 PHP
php中去除所有js,html,css代码
2010/10/12 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
将Python代码打包为jar软件的简单方法
2015/08/04 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
django 控制页面跳转的例子
2019/08/06 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Python基于locals返回作用域字典
2020/10/17 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
Servlet的生命周期
2013/08/25 面试题
求职信格式范文
2015/03/19 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
python munch库的使用解析
2021/05/25 Python
linux目录管理方法介绍
2022/06/01 Servers