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 事件对象属性小结
Apr 27 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
JS高级运动实例分析
Dec 20 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 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原型模式
2014/11/25 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
详解Python中的文本处理
2015/04/11 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
区分python中的进程与线程
2020/08/13 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
30年同学聚会感言
2014/01/30 职场文书
yy婚礼主持词
2014/03/14 职场文书
给校长的建议书600字
2014/05/15 职场文书
社区先进事迹材料
2014/05/19 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
2015年个人思想总结
2015/03/09 职场文书
民事纠纷协议书
2016/03/23 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
关于JavaScript轮播图的实现
2021/11/20 Javascript