代码如下，以便自己以后方便查阅：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>菜单二级联动效果</title>

</head>

<body>

<script language="JavaScript" type="text/javascript">

/*var city=[

    ["北京","天津","上海","重庆"],

    ["南京","苏州","南通","常州"],

    ["福州","福安","龙岩","南平"],

    ["广州","潮阳","潮州","澄海"],

    ["兰州","白银","定西","敦煌"]

];*/

//或者

var city = new Array;

city[0] = Array("北京","天津","上海","重庆");

city[1] = Array("南京","苏州","南通","常州");

city[2] = Array("福州","福安","龙岩","南平");

city[3] = Array("广州","潮阳","潮州","澄海");

city[4] = Array("兰州","白银","定西","敦煌");

function getCity(){

    var sltProvince=document.getElementById("province");

    var sltCity=document.getElementById("city");

    var provinceCity=city[sltProvince.selectedIndex-1];

    sltCity.length=1;

    for(var i=0;i<provinceCity.length;i++){

        sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);

    }

}

</script>

<form action="#" name="theForm">

    <select name="province" id="province" onchange="getCity()">

        <option value="0">请选择所在省份</option>

        <option value="直辖市">直辖市</option>

        <option value="江苏省">江苏省</option>

        <option value="福建省">福建省</option>

        <option value="广东省">广东省</option>

        <option value="甘肃省">甘肃省</option>

    </select>

    <select id="city" name="city">

        <option value="0">请选择所在城市</option>

    </select>

</form>

</body>

</html>

效果如下：

js实现菜单二级联动的更多相关文章

  1. Mybatis + js 实现下拉列表二级联动

    Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...

  2. xml+js+html的二级联动

    首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...

  3. js实现城市二级联动列表

    这个是一个同事写的,我看着有用,就cv下来了. 程序功能主要逻辑是: 1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏 2.一级标签选中城市时,二级标签显示在页面,并列出响应市区 3.当 ...

  4. JS简单实现二级联动菜单

    <form method="post" action=""> 省/市:<select id="province" onch ...

  5. 原生JS的地区二级联动，很好理解的逻辑

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 用原生JS写省市二级联动

    HTML代码 <select id="s1"> <option value="0">~请选择省份~</option> < ...

  7. 用JS实现省市二级联动

    一.需求分析 我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 二.技术分析 使用事件(onchange) 使用一个二 ...

  8. JavaScript学习——使用JS完成省市二级联动

    1.我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 2.步骤分析: 第一步:确定事件(onchange)并为其绑定一 ...

  9. 用户管理的设计--3.jquery的ajax实现二级联动

    页面效果 实现步骤 1.引入struts整合json的插件包 2.页面使用jquery的ajax调用二级联动的js //ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 fu ...

随机推荐

  1. Java原来如此-几种常见的排序--冒泡排序（Bubble Sort）

    冒泡排序的原理:假设要求的数组是正序,两两进行比较,如果前一个数比后一个数小,位置不变.如果前一个数比后一个数大,位置互换,再跟后一个数进行比较,直到最后.就是逐步把大数送到最后. 举个例子:int[ ...

  2. 跳转到指定页面popToViewController用法

    有人问popToViewController的用法 就写了下了 希望能帮到有需要的人 [self.navigationController popToViewController:[self.navi ...

  3. Android(java方法）上实现mp4的分割和拼接 （一）

       最近正在处理android上的mp4切割问题.学习了很多mp4的知识,mp4文件按照编码类型,分为mpeg-4,avc这两种:这两种类型的mp4在后面的处理中会有不同的地方. 在Android系 ...

  4. jenkins执行单元测试，会产生大量临时文件，要及时删除，不然会把inode耗尽

    jenkins的build命令:clean test -U findbugs:findbugs pmd:pmd sonar:sonar -Djava.io.tmpdir=/tmp/ -Dsonar.p ...

  5. hadoop学习笔记——环境搭建

    基础环境准备: 系统:(VirtualBox) ubuntu-12.04.2-desktop-i386.iso hadoop版本:hadoop-0.20.203.0rc1.tar.gz jdk版本:j ...

  6. ruby简单的基础 4

    后缀标点符号 ＝结尾假设方法名字以＝结尾的,那么在调用此方法时能够省略这个＝. ?结尾作为一个实用惯例,那些返回布尔值的方法通常都有一个以问号结尾的名字. .结尾这个命名惯例通常时对两种方法区分:以感 ...

  7. 混合背包 hdu5410 CRB and His Birthday

    传送门:点击打开链接 题意:你有M块钱,如今有N件商品 第i件商品要Wi块,假设你购买x个这种商品.你将得到Ai*x+Bi个糖果 问能得到的最多的糖果数 思路:很好的一道01背包和全然背包结合的题目 ...

  8. Lead软件项目半年感受

    Lead一个项目快半年了,整体来说是个辛苦活. 除了自己的研发进度,还要负责对上,对下,对外的交流.这里记录一些感受.     对上的交流,除了确保正确理解老大的安排.就是确保老大在和他的lead以及 ...

  9. CentOS Linux搭建独立SVN Server全套流程(转)

    环境为centos6.3 1.首先 看看机器上安装了svn了没有 rpm -qa |grep svn 2.如果没有安装 执行 yum -y install subversion 3.安装好了之后 新建 ...

  10. 不使用while，for，if等实现加法

    不使用if, while,for,switch等实现从1到10的加法 解:这里使用静态函数和静态变量实现,利用类似的方法也能够实现从1打印到1000 class TheSum{ public: The ...