历时一天，基本完成了，也不是绝对意义上的N级联动。反正级不少。。。。
准备工作：由于后面代码都是由一些基本代码拼凑成的，所以在正式开始前先看看这些基本的代码
准备代码一 ：
<html>
<head>
<script language="javascript" type="text/javascript">
function selectType(value,sid){
var se=document.getElementById(sid);
alert(value)
var fun
}
</script>
</head>
<body>
<select id="s1" onchange="selectType(this.value,'s1');" >
<option select >选择类别</option>
<option name="typeId" value="01" >第一个</option>
<option name="typeId" value="02" >第二个</option>
<option name="typeId" value="03" >第三个</option>
<select>
当在下拉列表选择时，可以弹出选择的值：比如我选择“第一个”，alert弹出01
</body>
</html>
准备代码二：
<html>
<head>
<script language="javascript" type="text/javascript">
function hidden(sid){
document.getElementById(sid).style.display ="none";
}
function show(sid){
document.getElementById(sid).style.display="inline";
}
</script>
</head>
<body>
<div id="s1" onclick="hidden('s1')">
点击隐藏
</div>
<div onclick="show('s1')">显示</div>
</body>
</html>
准备代码三：
<html>
<head>
<script language="javascript" type="text/javascript">
function fill(){
document.getElementById("se").options.add(new Option('abc','01'));
document.getElementById("se").options.add(new Option('xyz','02'));
}
function del(){
var ops = document.getElementById("se");
ops.innerHTML = " ";
//也可以使用下面代码
//var ops = document.getElementById("se");
//ops.length = 0;
}
</script>
</head>
<body onload="fill()">
<select id="se">
<option>一</option>
<option>二</option>
<select> <br><br><br>
<div onclick="del()">清掉所有option选项<div>
</body>
</html>
准备代码四：
<html>
<head>
<script language="javascript" type="text/javascript">
function set(){
document.getElementById('vi').value=3; //设置值
var con = document.getElementById('vi').value; //获取值
alert(con);
}
</script>
</head>
<body >
<form>
<input type="hidden" id="vi" />
</form>
<div onclick="set()">获取值<div>
</body>
</html>
N级联动开始：
大致思想：设定多个下拉列表，初始为隐藏。然后当点选下拉列表某一个的时候，生成出下一级下拉列表。我觉得不怎么好描述，还是看代码吧。说明以下内容涉及到ajax相关，不懂此知识的建议学些再来看如下内容：
下拉列表：理认上讲，不会真正N级，我这里最多也就6级，因为项目中最多也就只有6级
<select id="sect1" onchange="selectType(this.value,'sect2',2);" >
<option select >请选择</option>
<c:forEach items="${types}" var="entry">
<option name="typeId" value=${entry.id} >${entry.name}</option>
</c:forEach>
</select>
<select id="sect2" style="display:none;" onchange="selectType(this.value,'sect3',3);"></select>
<select id="sect3" style="display:none;" onchange="selectType(this.value,'sect4',4);"></select>
<select id="sect4" style="display:none;" onchange="selectType(this.value,'sect5',5);"></select>
<select id="sect5" style="display:none;" onchange="selectType(this.value,'sect6',6);"></select>
<select id="sect6" style="display:none;" ></select>
ajax /js相关的代码：
function selectType(tvalue,sid,clId){
//开始前，就先清掉激发事件的所有下级下拉列表，代码如下：
switch(clId){
case 2 :document.getElementById('sect2').style.display='none';
case 3 :document.getElementById('sect3').style.display='none';
case 4 :document.getElementById('sect4').style.display='none';
case 5 :document.getElementById('sect5').style.display='none';
case 6 :document.getElementById('sect6').style.display='none';
}
var xmlHttp;
try {
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
} catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
} catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
//注册回调函数
xmlHttp.onreadystatechange=function (){
//判断交互是否完成
if(xmlHttp.readyState==4){
//判断http的交互是否成功
if(xmlHttp.status==200){
//获取服务器端的纯文本数据
var responseText=xmlHttp.responseText;
var sign="no";
if(sign==responseText){
document.getElementById('ptid').value=tvalue;
//如果从服务器返回no标识，首先把typeId设为当前选择的类别值
getBrand(); //如果类别最终确定，再根据类别去动态设置品牌相关内容
}else{
var sele=document.getElementById(sid);
sele.length = 0; //清掉原有的option选项 或sele.innerHTML = " ";
var ary= responseText.split(",");
for(var i=0;i<ary.length;i++){
var op = ary[i].split("-");
sele.options.add(new Option(op[0],op[1]));
sele.style.display="inline";
}
}
}else{
alert("出错了_请选择一个正确的类别");
}
}
};
//设置连接信息
var url =convertURL(encodeURI(encodeURI("/getType?typeId="+tvalue))); //页面端两次encodeURI
//xmlhttp.setRequestHeader( "Content-Type", "text/html;charset=UTF-8" );//设置编码
alert(tvalue);
xmlHttp.open("GET",url,true);
//发送数据，开始与服务器端交互
xmlHttp.send(null);
}
说明服务器返回的responseText内容形式为： 类别1-01,类别2-02,类别3-03
converUrl函数内容如下：
//给url地址增加时间戳，骗过浏览器，不读取缓存
function convertURL(url) {
//获取时间戳
var timstamp = (new Date()).valueOf();
//将时间戳信息拼接到url上
if (url.indexOf("?") >= 0) {
url = url + "&t=" + timstamp;
} else {
url = url + "?t=" + timstamp;
}
return url;
}
由于自己的js不怎么行，所以很多代码可能没有使用较较简洁的方法，大家可以指正。。。3Q
最后感谢 JavaScript征途超群1 提供的帮助，真的谢谢你们了
分享到：
相关推荐
"MyBatis之自查询使用递归实现 N级联动效果" MyBatis是一个功能强大且灵活的持久层框架，它支持自查询和递归查询，下面我们将探讨如何使用MyBatis实现 N级联动效果。 递归查询 递归查询是指在一个查询中调用自身...
N级联动是AJAX在特定场景下的应用，通常指的是在多级下拉菜单或者多层表格中，选择某一选项时，其他相关联的下拉菜单或表格会根据选择自动更新。 在N级联动中，一级菜单的选择会影响到二级菜单的内容，二级菜单的...
省市县N级联动是网页设计和前端开发中的一个重要概念，主要应用于下拉选择框的联动效果，例如在填写地址信息时，用户先选择省份，接着选择城市，再选择区县，这种逐级展开并依赖上一级选择结果的交互设计就被称为N级...
**jQuery N级联动**是一种常见的前端交互技术，用于实现多级选择联动效果，例如在地区选择中，选择省份后自动加载对应的市、县等。这种技术在网站表单设计、数据筛选等方面广泛应用，能提高用户体验，减少用户手动...
演示程序实现了省、市、县三级联动（ajax技术） 程序调用方法： 1：把 <script language="javascript" src="js/jquery.js"></script> <script language="javascript" src="js/firste_city.js"></script> 贴到网页...
5. 扩展性：为了实现N级联动，可以在事件处理函数中加入递归逻辑。当处理完当前级别的联动后，检查是否还有下一级，若有则继续处理，直至无更多级为止。 四、示例代码 以下是一个简单的3级下拉联动的jQuery实现： ...
"ajax n级联动数据库版(带后台和省市县数据库) v1.0.0 utf-8-ASP源码.zip" 这个标题揭示了几个关键知识点： 1. **AJAX (Asynchronous JavaScript and XML)**：这是一种在无需刷新整个网页的情况下，能够更新部分...
该压缩包文件“源代码-ajax n级联动数据库版(带后台和省市县数据库) utf-8.zip”包含了一个基于ASP技术实现的多级联动选择功能的源代码，主要用于处理省市县（或者地区）的层级数据。这个功能在很多网站中都有应用，...
这个实例开发源码是基于ASP技术实现的AJAX（Asynchronous JavaScript and XML）n级联动数据库版本，它包含了后台管理和省市县数据库。AJAX允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，提供了...
此资源“ASP源码—ajax n级联动数据库版(带后台和省市县数据库) utf-8.zip”显然是一个使用ASP技术构建的Web应用程序，它利用了AJAX（Asynchronous JavaScript and XML）技术来实现多级联动下拉菜单。这种联动效果...
标题中的“基于ASP的ajax n级联动数据库版(带后台和省市县数据库)”是指一个使用Active Server Pages (ASP)技术开发的Web应用示例，它结合了Ajax（Asynchronous JavaScript and XML）技术来实现多级联动的效果，主要...
在ASP（Active Server Pages）环境中，结合Ajax，我们可以创建高效的交互式网页应用，比如实现省、市、县的三级联动查询功能。这种功能常见于地址选择、区域定位等场景，极大地提高了用户体验。 **一、Ajax工作原理...
这个过程可以逐级扩展，直到完成n级联动。 在这个例子中，`index.html`文件很可能是包含HTML结构和JavaScript代码的网页文件，用于展示和控制联动效果。HTML部分可能包含了多个下拉框或其他选择元素，每个元素都有...
在给定的资源中，我们看到一个名为`linkedSelect.js`的文件，这很可能是一个JavaScript实现的N级联动下拉列表控件。JavaScript是网页动态交互的核心，用于处理用户输入、更新DOM（文档对象模型）以及与其他脚本或...
为了实现n级联动，代码需要具有足够的灵活性，能够适应任意数量的级别。这可能涉及到递归或者动态构建SQL查询语句的技术。同时，为了提高用户体验，还需要考虑性能优化，如缓存查询结果、减少不必要的数据库访问等。...
标题中的“最全省市区三级联动excel表格”指的是一个专门设计用于实现中国省、市、区三级数据联动的Excel表格模板。这种表格通常用于数据管理、统计分析或在Web应用程序中创建下拉选择框，以便用户可以按顺序选择...