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

<!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. UICollectionView的cell创建直接从第三个数据开始问题

    实现的效果是这样 大概意思就是第一组没有数据就直接将改组的cell高度变成0效果实现了,但是第二组数据创建cell就出问题了--奇葩问题 * 代码问题在这```-(CGSize)collectionV ...

  2. 牛客网 牛客小白月赛1 B.简单题2-控制输出格式

    B.简单题2   链接:https://www.nowcoder.com/acm/contest/85/B来源:牛客网 和A题一样,控制输出格式就可以. 代码: 1 #include<iostr ...

  3. Nginx日志参数、location匹配规则、设置密码

    1.三个参数 a)$http_referer:记录此次请求是从哪个链接访问过来的: 是直接访问,还是从其他网站跳转过来的. 例如:访问:http://www.etiantian.com/,其页面首页是 ...

  4. 通配符、正则表达式、python去重

    1.linux通配符 *:代表所有字符(0到多个); ?:代表一个字符; ;:连续不同命令之间的分隔符; #:配置文件注释; |:管道; ~:当前用户的家目录; -:上一次所在的路径; $:变量前面需 ...

  5. java webservice wsimport 无法将名称 'soapenc:Array' 解析为 'type definition' 组件 时对应的解决方法

    (一):代码如下: package com.enso.uploaddata; import org.apache.axis.client.Call; import org.apache.axis.cl ...

  6. AngularJS中使用Directive、Controller、Service

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...

  7. UPLINK口

    为什么我买的交换机没有UPLINK口? UPLINK端口的作用是为了解决网络设备互连时的网线(交叉线和直通线)的使用问题.现在新出的交换机有的是没有UPLINK口的,没有UPLINK口的交换机的每个端 ...

  8. ccs 中的定位

    一.相对定位 position:relative; 作用: 相对定位 一般加给定位元素父级    特点: (1)不脱离文档流: (2)不改变元素类型: (3)参照物是元素本身: 二.绝对定位 posi ...

  9. eclipse下的ssh框架整合过程及測试

    最近在搭建Stuts2+hibernate+spring的框架,网上看的教程,大部分都是非常easy的步骤.没有比較具体的步骤以及每一个步骤完毕之后怎样检查是否配置成功.下面是笔者依据自己搭建的过程进 ...

  10. cug oj 1479 Treasure Chest Lock （区间dp 思维）

    1479: Treasure Chest Lock Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 7  Solved: 5 [id=1479" ...