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,有空研究学习下
Jan 25 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
javascript中expression的用法整理
May 13 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 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中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
js+css在交互上的应用
2010/07/18 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python 进程的几种创建方式详解
2019/08/29 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
django使用多个数据库的方法实例
2021/03/04 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
校园报刊亭创业计划书
2014/01/02 职场文书
我爱我家教学反思
2014/05/01 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
门店店长岗位职责
2015/04/14 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
证婚人致辞精选
2015/07/28 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL