• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > JavaScript省市级联下拉菜单实例

JavaScript省市级联下拉菜单实例

作者:梵音与笙 字体:[增加 减小] 来源:互联网 时间:2017-05-11

梵音与笙通过本文主要向大家介绍了javascript省市级联,javascript城市级联,javascript级联,javascript 省市联动,省市级联等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

最近学了一个关于省市级联简单的小例子,贴出来与大家分享一下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>
</head>
<body>
 <select id="selProvince" onchange="changeCity()">
  <option>请选择省份</option>
 </select>
 <select id="selCity">
  <option>请选择城市</option>
 </select>
 <script>
  function $(ID){
  return document.getElementById(ID);
  }
  var cityList=new Array();
  cityList['北京市']=['东城区','西城区','昌平区'];
  cityList['河北省']=['保定','石家庄','定州'];
   cityList['江苏省'] = ['南京市','苏州市','无锡市'];
   cityList['浙江省'] = ['杭州市','宁波市','温州市'];
   cityList['四川省'] = ['四川省','成都市'];
   cityList['海南省'] = ['海口市'];
  function changeCity(){
   var province=$("selProvince").value;
   var city=$("selCity");
    city.options.length=0;
   for (var i in cityList) {
   if(i==province){
    for (var j in cityList[i]) {
     city.add(new Option(cityList[i][j],cityList[i][j]),null);
    }
   }
   }
  }
  function allCity(){
   var province=$("selProvince");
   for (var i in cityList) {
    province.add(new Option(i,i),null);
   }
  }

  window.onload=allCity;
 </script>
</body>
</html>
</div>

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JavaScript省市级联下拉菜单实例
  • JavaScript轻松创建级联函数的方法示例

相关文章

  • 2017-05-11jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
  • 2017-05-11jQuery Masonry瀑布流插件使用方法详解
  • 2017-05-11jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
  • 2017-05-11详解AngularJs HTTP响应拦截器实现登陆、权限校验
  • 2017-08-19js字符串截取函数slice()、substring()、substr()
  • 2017-05-11详解nodeJS中读写文件方法的区别
  • 2017-05-11用vue和node写的简易购物车实现
  • 2017-05-11JS ES6多行字符串与连接字符串的表示方法
  • 2017-05-11bootstrap fileinput 上传插件的基础使用
  • 2017-05-11JavaScript简单计算人的年龄示例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • canvas实现环形进度条效果
    • js Canvas绘制圆形时钟教程
    • 微信小程序 九宫格实例代码
    • javascript实现动态显示颜色块的报表效果
    • vue.js树形组件之删除双击增加分支实例代码
    • JavaScript继承
    • 详解Vue方法与事件
    • JavaScript日期选择功能示例
    • javascript自执行函数
    • jqPaginator结合express实现分页展示内容效果第1/2页

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有