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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
javascript+xml技术实现分页浏览
Jul 27 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
再探JavaScript作用域
Sep 24 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
Vue父子组件传值的一些坑
Sep 16 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 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php的dl函数用法实例
2014/11/06 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
Vue.js中的computed工作原理
2018/03/22 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
Python装饰器的函数式编程详解
2015/02/27 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
酒店管理自荐信
2013/10/23 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
校本培训个人总结
2015/02/28 职场文书
社区敬老月活动总结
2015/05/07 职场文书
2015年底工作总结范文
2015/05/15 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
SQL SERVER触发器详解
2022/02/24 SQL Server