N级联动

最新推荐文章于 2022-04-26 13:59:33 发布

guilai0018

最新推荐文章于 2022-04-26 13:59:33 发布

阅读量166

点赞数

分类专栏： Web 前端文章标签： JavaScript Ajax 浏览器 HTML Safari ViewUI

Web 前端专栏收录该内容

5 篇文章

订阅专栏

历时一天，基本完成了，也不是绝对意义上的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 提供的帮助，真的谢谢你们了