js实现二级联动菜单

下面是一段js实现二级联动菜单的代码，供初学者使用。文件名：index.html,代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省"];
var arr_city = [["请选择城市/地区"],["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市']];
//网页加载完成，初始化二级菜单
window.onload = init; //传地址，不带括号
function init()
{//获取name=province和name=city的对象var province = document.form1.province;var city = document.form1.city;//指定省份下拉中<option>标记的个数province.length = arr_province.length;//循环将arr_province中的数据写入到<option>标记中for(var i=0;i<arr_province.length;i++){province.options[i].text = arr_province[i];province.options[i].value = arr_province[i];}//修改省份列表中默认选择项var index = 0;province.selectedIndex = index;//指定城市下拉中<option>标记的个数city.length = arr_city[index].length;//循环将arr_city中对应的数据写入到<option>标记中for(var j=0;j<arr_city[index].length;j++){city.options[j].text = arr_city[index][j];city.options[j].value = arr_city[index][j];}
}
function changeSelect(index)
{//获取name=city的对象var city = document.form1.city;//指定城市下拉中<option>标记的个数city.length = arr_city[index].length;//循环将arr_city中对应的数据写入到<option>标记中for(var j=0;j<arr_city[index].length;j++){city.options[j].text = arr_city[index][j];city.options[j].value = arr_city[index][j];}
}
</script>
</head><body>
<form name="form1" method="post" action="login.php">
省份：<select name="province" onchange="changeSelect(this.selectedIndex)"></select>
城市：<select name="city"></select>
</form>
</body>
</html>

原文地址：http://liuyanzhao.com/1878.html

js实现二级联动菜单相关推荐

JS省市二级联动菜单,sky整理收集。
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
前端：JS/35/二级联动菜单，select对象，select对象的属性，option对象，option对象属性，实例：省份列表与城市列表的联动
二级联动菜单 select 对象一个<select>标记,对应一个select对象: select对象的属性 1,options[] :设置或返回下拉列表中<option>标 ...
php js 二级联动_PHP+ajax实现二级联动菜单功能示例
本文实例讲述了PHP+ajax实现二级联动菜单功能.分享给大家供大家参考,具体如下: 如何实现二级联动工作原理二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于 ...
二级联动菜单，简单实现
/*** jQuery Linkage Menu** Copyright 2014, sunyingyuan* QQ: 1586383022* Email: yingyuansun@163.com** ...
asp+ajax菜单,AJAX_基于asp+ajax和数据库驱动的二级联动菜单，index.asp 页面代码复制代码代 - phpStudy...
基于asp+ajax和数据库驱动的二级联动菜单 index.asp 页面代码复制代码代码如下: set cmd = conn.execute("select bigclassid,big ...
php 二级下拉菜单源码,二级联动菜单-PHP源码
<script>ec(2);<script> 二级联动下拉菜单自家用的 js二级联动菜单其实我觉得 asp二级联动菜单与 php二级联动菜单两个相同只是表示方式不一样. ...
C#：二级联动菜单的实现
二级联动菜单,顾名思义,即一个菜单的变化会自动触发另一个相关联菜单的变化. 举个简单的例子,第一个菜单显示"北京",第二菜单会相应绑定列表"海淀区"," ...
php二层联动,php怎么实现二级联动菜单
php实现二级联动菜单的方法:首先创建好HTML文件和PHP文件:然后编写前端代码以及后端逻辑代码:接着向后台发送一个请求:最后将值用JS呈现在页面中即可. 本文操作环境:windows7系统.PHP ...
php几级栏目联动,php实现二级联动菜单
php实现二级联动菜单 php实现二级联动菜单的方法:首先根据大类的值,通过jQuery把值传给后台PHP处理:然后用PHP查询MySQl数据库,得到相应的小类:最后返回JSON数据给前端处理即可. ...
二级联动菜单ajax刷新,jquery json ajax 二级联动菜单实例
本文实例讲述了jquery json ajax 二级联动菜单.分享给码农们参考,具体如下: 后台Handler.ashx using System; using System.Web; using S ...

js实现二级联动菜单

js实现二级联动菜单相关推荐

最新文章

热门文章