<!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. 阿里巴巴Java开发手册———个人追加的见解和补充（一）

    先上干货,<阿里巴巴Java开发手册>的下载地址 https://yq.aliyun.com/articles/69327?spm=5176.100239.blogcont69327.15 ...

  2. HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点

    1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...

  3. Java中显示图片的方法

    最近在做一个swing小项目,其中需要把存储在硬盘中的图片文件显示出来,总结了如下方法: 1. Graphics g = getGraphics();String name = "E:/Ca ...

  4. gvim生存配置

    set guioptions-=Tcolorscheme desert set clipboard+=unnamedset mouse=a winpos 200 50set lines=20 colu ...

  5. Java之路——敬JAVA初学者（作者：MoMo）

    作为一名大四的毕业生,大学三年过,有得有失.作为一个喜欢编程,喜欢JAVA的人,自学其实是一件美事,很有意思的事.要是能再找个女朋友一起学.嘿嘿,就不枉在大学走了一遭啊!    要离开学校了,还是想留 ...

  6. 丘吉尔，最后一次演讲-Never Give Up

    丘吉尔一生最精彩的演讲,也是他最后一次演讲.在剑桥大学的一次毕业典礼上,整个会堂有上万个学生,他们正在等待丘吉尔的出现.正在这时,丘吉尔在他的随从陪同下走进了会场并慢慢走向讲台,他脱下他的大衣交给随从 ...

  7. BZOJ 1076: [SCOI2008]奖励关(概率+dp)

    首先嘛，看了这么久概率论真的不错啊。看到就知道怎么写（其实也挺容易的= =） 直接数位dp就行了 CODE： #include<cstdio> #include<cstring> ...

  8. githup教程

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/瘳雪峰-Git教程http://w ...

  9. MyBatis从入门到放弃一：从SqlSession实现增删改查

    前言 开博客这是第一次写系列文章,从内心上讲是有点担心自己写不好,写不全,毕竟是作为java/mybatis学习的过程想把学习的路线和遇到的问题都总结下来,也让知识点在脑海里能形成一个体系. 开发环境 ...

  10. HDU---Labyrinth

    Labyrinth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...