<script>
//构造2个数组
var detail_show = new Array();
var detail_value = new Array();
detail_show[0] = new Array();
detail_value[0] = new Array();
detail_show[0][0] = '上海';
detail_value[0][0] = '0101';
detail_show[0][1] = '北京';
detail_value[0][1] = '0102';
detail_show[0][2] = '广州';
detail_value[0][2] = '0103';
detail_show[1] = new Array();
detail_value[1] = new Array();
detail_show[1][0] = '纽约';
detail_value[1][0] = '0201';
detail_show[1][1] = '华盛顿';
detail_value[1][1] = '0202';
detail_show[1][2] = '加州';
detail_value[1][2] = '0203';
detail_show[2] = new Array();
detail_value[2] = new Array();
detail_show[2][0] = '伦敦';
detail_value[2][0] = '0301';
detail_show[2][1] = '利物浦';
detail_value[2][1] = '0302';
detail_show[2][2] = '伯明翰';
detail_value[2][2] = '0303';
function change(target) {
//获取级联的下拉列表
var deselect = document.getElementById("deselect");
//清空第二个下拉列表的选项
deselect.innerHTML = null;
var m = target.selectedIndex;
if (m >= 0) {
for (i = 0; i < detail_show[m].length; i++) {
//循环构造很多option,然后放在指定的option中
//new Option(show,value)可以构造一个一个的option
deselect.options[i] = new Option(detail_show[m][i],
detail_value[m][i]);
}
//设置默认选中第一个列表项
deselect.options[0].selected = true;
}
}
</script>
<!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>
<title>级联菜单</title>
<meta name="author" content="Yeeku.H.Lee" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center">
<h2>
级联菜单
</h2>
<form id="flyform">
<select name="caselect" id="caselect" style="width: 80"
onchange="change(this)";>
<option value="01">
中国
</option>
<option value="02">
美国
</option>
<option value="03">
英国
</option>
</select>
<select name="deselect" id="deselect" style="width: 150">
</select>
</form>
</div>
</body>
</html>
分享到：
相关推荐
该实例为本人项目中使用的模块代码，经过专业测试人员测试，兼容所有主流浏览器，如有不解之处请联系本人
struts2+jsp+json+javascript实现的三级下拉菜单，没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
使用ajax和servlet实现两级下拉框的动态级联
刚学dwr 自己写的三级联动下拉框 DWR版本 3.0 数据库 Ms SQL 2005 环境 Myeclipse 8.x 有问题联系 ：Mr .陈 MSN czw30110@hotmail.com
spcc.js文件有一个地方需要修改一下 在第30行有一个citySele需要修改为seleValue 全文也就一个citySele
这是我在网上查找到的php实现三级级联下拉框的资料，共享个大家，大家一起进步，具体内容如下 index.php: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">...
Js Select下拉框级联菜单，一共支持5级联动，相信够用了，这种菜单不用多介绍吧，后一级的值与前一级是父、子关系，该示例还演示了动态添加菜单、减少菜单的功能，还有显示/不显示空值的功能，如演示截图所示。
Asp+Ajax无限级联动下拉框菜单Access版 ASP仿Google输入框提示_自动完成功能 AJAX+ASP多级无限制级联菜单（地市版） ASP下结合AJAX实现输入框提示（自动完成） ASP 树形菜单TreeView 多样式版 jQuery实例_飞飞ajax带...
一个简单的级联操作，可无限进行级联，根据当前下拉框选中的值，通过ajax请求，到后台看当前节点是否有下子节点，在返回json对象，在通过判断json数据的长度来判断是否显示出下一个下拉框和下拉框的值，对一些新手很...
Ajax+Json 级联菜单实现代码，需要的朋友可以参考下。
Ajax_实现下拉框的联动效果（详细注释） 有源码程序
摘要:脚本资源,jQuery,级联菜单,全国城市菜单 美化版的jQuery全国城市级联菜单代码实例包，Select下拉框已经过美化，比传统的灰色风格Select下拉列表更美观，城市菜单信息存放在XML文件内，若城市信息有所变动，...
jquery实现的无限级联菜单，Select下拉列表式的级联菜单，三个下拉框的值相互影响，无限级联扩展，无需ajax，纯json数据调用。调用方式请参见示例文件。
当二级联动要实现数据库时实读取时,比较麻烦,本例子用Ajax可以简单实现 ajax+Jsp+js+servlet
菜单资源保存在数据库中。利用了jquery的ajax实现。用到的包有：json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js jsp页面的代码： 代码如下: <%@ page contentType=”text/html; charset=gbk...
每当下拉框选择改变的时候，会发送一次ajax请求，请求成功返回json格式数据，当返回的数据不为空时（即有子节点时），则会向页面中添加一个下拉框，没有则不添加。 插件的实现代码如下： (function ($) { $.fn....
内容索引:.NET源码,Ajax相关,Ajax,级联菜单 使用ajax技术结合c#的WebService实现的无刷新盛市、县三级联动下拉框源程序，含控件源代码，工程运行VS2003，具体一点就是使用webservice.htc，然后由JavaScript调用...
本文实例为大家分享了Ajax二级联动菜单的具体代码，供大家参考，具体内容如下 index.jsp <%@ page language=java pageEncoding=UTF-8%> <html> <head> <title>二级菜单联动演示</...
[removed]=function() {//页面加载时的函数 } function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数 var province = document.getElementById(‘province’).value; var url =