历时一天,基本完成了,也不是绝对意义上的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级联动效果,本文给大家分享两种实现方式,需要的的朋友参考下吧
演示程序实现了省、市、县三级联动(ajax技术) 程序调用方法: 1:把 <script language="javascript" src="js/jquery.js"></script> <script language="javascript" src="js/firste_city.js"></script> 贴到网页...
省市县N级联动
非常实用的联动资料与大家分享,平时开发中都能用到的资源源码,非常好用。
源代码-ajax n级联动数据库版(带后台和省市县数据库) utf-8.zip
ASP源码—ajax n级联动数据库版(带后台和省市县数据库) utf-8.zip
基于ASP的ajax n级联动数据库版(带后台和省市县数据库) utf-8.zip
NULL 博文链接:https://hudeyong926.iteye.com/blog/561819
基于jquery的N级下拉联动,例子里面实现了3级联动,可以自己扩展
ASP实例开发源码—ajax n级联动数据库版(带后台和省市县数据库) utf-8.zip
asp装入环境即可用的三级联动省市县查询 附带后台管理,可以依据需求随意改动,代码灵活,没有写死,可适当添加或者减少需求,可配置n级查询
n级联动代码
ASP源码,压缩包解压密码:www.cqlsoft.com
数据库+三级联动代码,我一直用着,这个段代码通过修改,可以实现 n级联动
基于多维动态S盒混淆替换和N级联动LFSR的分组密码算法
JS特效-N级的联动Select下拉框,挺好看的.
运用jquery写的省市三级联动Demo 简单实用