<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>省市级联</title>
</head>
<body>
  <select id="sheng">
  <option>-请选择-</option>  
  </select>
  <select id="city">
  <option>-请选择-</option>
  </select>
  </body>
<script type="text/javascript">

//加载方法
onload = checkcity;

//封装方法
function checkcity(){

//获取省份的id
var sheng = document.getElementById("sheng");

//创建数组
var arr = new Array();
arr['江西省']=['南昌市','赣州市'];
arr['河南省']=['郑州市','洛阳市'];

//获取省份
for(var i in arr){
sheng.add(new Option(i,i),null);
}

//获取市
sheng.onchange = function(){

var sheng = document.getElementById("sheng").value;
var city = document.getElementById("city");

city.length = 0;

//迭代级联
for(var k in arr[sheng]){
city.add(new Option(arr[sheng][k],arr[sheng][k]),null);

}
}
}
</script>
</html>

js简单省级联动菜单的更多相关文章

  1. 学习 | 基于require.js的三级联动菜单【入门】

    主要目的是学习如何使用require.js AMD就是通过延迟和按需加载来解决各个模块的依赖关系,其中require就是AMD的框架之一 它的优点是可以解决以下问题: JS文件的依赖关系. 通过异步加 ...

  2. 30行代码实现js原生三级联动菜单

    var oneArr=[['00','成都'],['01','绵阳'],['02','南充']] var towArr={ '00':[['000','武侯区'],['002','锦江区']], '0 ...

  3. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  4. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  5. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  6. phpcms v9联动菜单的调用方法及get_linkage函数简单过程

    {get_linkage($r['areaid'],1,' >> ',1)} 复制代码 当然这个 $r 也不是绝对的.要看你的loop 是如何写的. {loop $data $n $r} ...

  7. MVC实现省级联动

    前言 省级联动的效果,网上现成的都有很多,各种JS实现,Jquery实现等等,今天我们要讲的是在MVC里面,如何更方便.更轻量的实现省级联动呢? 实现效果如下: 具体实现 如图所示,在HTML页非常简 ...

  8. Ajax-ajax实例4-多级联动菜单

    项目结构: 项目运行: 技术要点: 1.4.1 技术要点在分析具体的实现代码之前,先介绍一下本例的几个技术要点.1 .选项的动态创建与删除document 对象的 createElement 方法可以 ...

  9. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

随机推荐

  1. bppm与AD域集成

    1. 使用admin登录BMC ProactiveNet Operations Console,点击选项-> 集成编辑 2. 勾选LDAP集成方式,配置相关信息,点击应用 3. 查看配置文件%B ...

  2. C#委托简介

    C#中委托是一种引用类型,该引用类型与其他引用类型不同,在委托对象的引用中存放的不是对数据的引用而是存放对方法的引用,即委托的内部包含一个指向某个方法的指针.通过使用委托把方法的引用封装在委托对象中, ...

  3. web移动端Fixed在Input获取焦点时ios下产生的BUG及处理

    1.现象 可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...

  4. 关于c语言中栈和堆释放的问题

    #include<iostream> #include<string> using namespace std; int main() { string st; cin> ...

  5. ASP.NET 运行机制详解

    1.浏览器和服务器的交互原理 通俗描述:我们平时通过浏览器来访问网站,其实就相当于你通过浏览器去访问一台电脑上访问文件一样,只不过浏览器的访问请求是由被访问的电脑上的一个 WEB服务器软件来接收处理, ...

  6. Loadrunner之脚本编写

    先打开loadrunner的服务器(打开成功之后会出现一个绿色的X) 以订票系统为例(http://127.0.0.1:1080/WebTours/) 录制一个登陆的脚本. 利用C语言编写一个简单的脚 ...

  7. RHEL 6.0 FTP服务器配置菜鸟配置过程记录

    环境: 虚拟机 RHEL6.0  为了图方便,直接就默认安装了,结果酿成大错,后表~~ 项目:搭建VSFTPD服务器 1.网络ifconfig 配置好,给个IP 2.RPM包或者YUM安装vsftpd ...

  8. 批量删除的PHP

    第一个页面shanchu.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. HTML第一课

    <标签名 属性>内容</标签名> <标签/> 静态网页与动态网页的区别:是否从数据库提取数据相对路径跟绝对路径../代表高一级的&nbsp牛逼的空格< ...

  10. laravel中的Database Notifications

    创建Post and  User模型 php artisan make:model Post php artisan make:model User 创建posts and  users 表文件 ph ...