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实现表格动态增加行并对新行添加事件
Jul 30 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 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文件上传原理简单分析
2011/05/29 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
JS实现异步上传压缩图片
2017/04/22 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
详解jquery和vue对比
2019/04/16 jQuery
Python脚本实现下载合并SAE日志
2015/02/10 Python
wxPython中listbox用法实例详解
2015/06/01 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
移动通信行业实习自我鉴定
2013/09/28 职场文书
环保宣传标语
2014/06/12 职场文书
学习党代会心得体会
2014/09/05 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
先进集体申报材料
2014/12/25 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技