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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
解决vue-cli创建项目的loader问题
Mar 13 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
js实现多图和单图上传显示
Dec 18 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中读取照片exif信息的方法
2014/08/20 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
取得传值的函数
2006/10/27 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
详解JS函数重载
2014/12/04 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
python控制台显示时钟的示例
2014/02/24 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
python实现移动木板小游戏
2020/10/09 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
上海期货面试题
2014/01/31 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
五年级音乐教学反思
2014/02/06 职场文书
求职自荐信怎么写
2014/03/06 职场文书
成立公司计划书
2014/05/07 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
致青春观后感
2015/06/09 职场文书
重阳节主题班会
2015/08/17 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL