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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
微信小程序签到功能
Oct 31 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 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
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
javascript操作cookie
2017/01/17 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
python排序方法实例分析
2015/04/30 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
运动会入场解说词300字
2014/01/25 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
寄语学生的话
2014/04/10 职场文书
建设投标担保书
2014/05/13 职场文书
考试诚信承诺书
2014/05/23 职场文书
专科生就业求职信
2014/06/22 职场文书
信用卡收入证明范本
2015/06/12 职场文书
总结会主持词
2015/07/02 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js