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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
Mootools 1.2教程 类(一)
Sep 15 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
js获取微信版本号的方法
May 12 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
原生javascript如何实现共享onload事件
Jul 03 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 微信支付类 demo
2015/11/30 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
简单JS代码压缩器
2006/10/12 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Python实现Dijkstra算法
2018/10/17 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python 处理图片像素点的实例
2019/01/08 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
pytorch SENet实现案例
2020/06/24 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
医院护士的求职信范文
2013/12/26 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
离婚协议书范本样本
2014/08/19 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
少年犯观后感
2015/06/11 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书