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 Array对象入门分析
Oct 30 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
Javascript之Math对象详解
Jun 07 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
工作中常用js功能汇总
Nov 07 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
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python决策树分类算法学习
2017/12/22 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
学术会议欢迎词
2014/01/09 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis