<!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. 在GlassFish应用服务器上创建并运行你的第一个Restful Web Service【翻译】

    前言 本人一直开发Android应用,目前Android就业形势恶劣,甚至会一路下滑,因此决定学习服务器开发.采用的语言是java,IDE是Intellij,在下载Intellij的同时看到官网很多优 ...

  2. node文件中的package.json文件解析

    { "name":"myejsapp", "version":"0.0.0", "private": ...

  3. linux下常用语言的语法检查插件整理

    linux下常用语言的语法检查插件 可以结合vim语法检查插件syntastic使用,具体请参考syntastic使用说明 如php,sql,json,css,js,html,shell,c等语法插件 ...

  4. Codeforces Round #372 +#373 部分题解

    用了两场比赛上Div 1感觉自己好腊鸡的说...以下是这两场比赛的部分题解(不得不说有个黄学长来抱大腿还是非常爽的) Round #372 : Div 2 A:Crazy Computer 题意:给定 ...

  5. BZOJ 1004: [HNOI2008]Cards（群论）

    好吧我就是蒟蒻根本没听说过群论（虽说听叉姐说几万年都不会考） 我也讲不太来，直接戳VFK大神的blog啦 = = http://vfleaking.blog.163.com/blog/static/1 ...

  6. 【openstack N版】——手把手教你制作生产环境镜像

    一.CentOS7镜像制作 1.1创建CentOS7虚拟机 1.1.1创建虚拟磁盘 #注:尽量将虚拟机创建在控制节点,以便于将镜像上传至glance [root@linux-node1 ~]# qem ...

  7. MySQL备份说明

    第一次发布博客,发现目录居然不会生成,后续慢慢熟悉博客园的设置.回正文--- 1 使用规范 1.1 实例级备份恢复 使用innobackupex,在业务空闲期执行,考虑到IO影响及 FLUSH TAB ...

  8. VUE2.0实现购物车和地址选配功能学习第四节

    第四节 v-on实现金额动态计算 用￥金额 进行格式处理,可以使用原生js进行转换,但是在vuei,使用filter过滤器更加方便 注: 1.es6语法=>和import等 好处在于res参数后 ...

  9. JavaWeb:JSTL

    JSTL 说明 什么是JSTL? JSP标准标签库(JavaServer Pages Standard Tag Library,JSTL)是一个定制的标签库的集合,用来解决像遍历map或者集合.条件测 ...

  10. centOS7 mini配置linux服务器（一）安装centOs7

    1. 准备centos-7 (minni镜像) 官网地址http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-Minim ...