js实现省市级联效果分享


Posted in Javascript onAugust 10, 2017

本文实例为大家分享了js实现省市级联效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <script type="text/javascript">
    var shengArr =new Array();
    shengArr["广东"]=["广州","深圳","珠海","汕头","韶关"] ;
    shengArr["湖南"]=["长沙","张家界","株洲","怀化","常德"] ;
    shengArr["湖北"]=["武汉","荆州","宜昌","黄冈","仙桃"] ;
    shengArr["安徽"]=["合肥","黄山"] ;
    shengArr["河南"]=["郑州","信阳","洛阳"] ;

    function getSheng(){
      var s =document.getElementById("sheng");

      for(var v in shengArr){
        s.add(new Option(v,v),null);
      }
    }
    function getCity(){
      var s =document.getElementById("sheng");
      var c =document.getElementById("city");
      var v=s.value;
      c.options.length =0;

      for(var i in shengArr[v]){ 
        c.add(new Option(shengArr[v][i],shengArr[v][i]),null);
      }
    }
  </script>

  <!--页面加载时获取 省名-->
  <body onload="getSheng()"> 

    <!-- 改变省时匹配该省的城市名-->
    省:<select id="sheng" onchange="getCity()"> 
      <option>--请选择</option>
    </select>
    市:<select id="city"></select>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
vue.js todolist实现代码
Oct 29 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 #Javascript
jquery对table做排序操作的实例演示
Aug 10 #jQuery
基于JavaScript实现飘落星星特效
Aug 10 #Javascript
提高Node.js性能的应用技巧分享
Aug 10 #Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 #Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 #Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 #Javascript
You might like
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
php实现简单四则运算器
2020/11/29 PHP
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
javascript实现画板功能
2020/04/12 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
python和ruby,我选谁?
2017/09/13 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
英文自荐信格式
2013/11/28 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
工程承诺书怎么写
2014/05/24 职场文书
2015年资料员工作总结
2015/04/25 职场文书
初中政教处工作总结
2015/08/12 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL