js无限级关联下拉列表代码

提示:您可以先修改部分代码再运行

js无限级关联下拉列表代码

<HTML>
<title>TestAspPage</title>
<head></head>
<body onload="arrMain('S1');">
<SELECT NAME="S1" onchange="GetObj(this.options[selectedIndex].text ,'S2');" >
<OPTION value="0" selected>--请选择--</OPTION>

</SELECT>

<SELECT NAME="S2" onchange="GetObj(this.options[selectedIndex].text,'S3');" disabled>
<OPTION value="0" selected >--请选择--</OPTION>
</SELECT>
<SELECT NAME="S3" onchange="GetObj(this.options[selectedIndex].text,'S4');" disabled>
<OPTION value="0" selected >--请选择--</OPTION>
</SELECT>
<SELECT NAME="S4" onchange="GetObj(this.options[selectedIndex].text,'S5');" disabled>
<OPTION value="0" selected >--请选择--</OPTION>
</SELECT>
<SELECT NAME="S5" disabled>
<OPTION value="0" selected >--请选择--</OPTION>
</SELECT>
<script language="javascript">
<!--//输入脚本内容
var t_list = new Array();//列值数组
var x_list = new Array();//列文本数组

//此处可以使用ASP来循环计数输出该数组

for(i=0;i<10;i++){
t_list[i] = i+1;
x_list[i] = "[项"+i+"]";
}

//--->
</script>

 

 

<script language="javascript">
<!--//输入脚本内容
function arrMain(ob){//初始化首选项目
var x = eval(ob);
var l = t_list.length;
for(i=0;i<l;i++){//循环增加主列表项目
init(x,x_list[i],t_list[i]);
}//循环结束
}//结束初始化首选项目

//--->
</script>

<script language="javascript">
<!--//输入脚本内容

function GetObj(v,ob){//
var o = eval(ob);
checkIsDisabled(o);
if(v=='--请选择--'){
ClearOption(o);
var l = o.length;
for(j=-1;l>j;l--){o.remove(l);}
var oOption = document.createElement("OPTION");
o.options.add(oOption);//开始增加
oOption.innerText = "--请选择--";//目标文本数据
oOption.value = "0";//目标值
oOption.selected = true;
o.disabled=true;
}//如果选择默认项则不进行操作
else{//选择项目进行操作
for(i=0;i<10;i++){
t_list[i] = i+1;
x_list[i] = v+"->"+"[项"+i+"]";
}
ClearOption(o);
arrMain(ob);
o.disabled=false;
}
}//结束

function init(ob,x,y){//给SELECT赋值项
var oOption = document.createElement("OPTION"); //设置需要增加OPTION的目标对像
ob.options.add(oOption);//开始增加
oOption.innerText = x;//目标文本数据
oOption.value = y;//目标值

}

function checkIsDisabled(ob){//判断需要禁用的列项函数开始

//**********引用说明开始***************//
//将代码向后添加引用方式
//var a-n =eval(object);定义N个项目对象
//**********引用说明结束**************//

var a = eval('S1');//定义级联选项,项目名称 对应表单的项目一
var b = eval('S2');//定义级联选项,项目名称 对应表单的项目二
var c = eval('S3');//定义级联选项,项目名称 对应表单的项目三
var d = eval('S4');//引用1
var e = eval('S5');//引用2

//如果第1列未选择则
if(a.value==0){//判断第1选项是否值为0,真则将其它所有先项置为只读
ClearOption(b);
b.disabled = true;
ClearOption(c);
c.disabled= true;

ClearOption(d);//引用1
d.disabled = true;//引用1

ClearOption(e);//引用2
e.disabled = true;//引用2

//**********引用说明开始***************//
//将代码向后添加引用方式
//ClearOption(object); //清除目标行
//object.disabled = true;//目标设置为只读
//**********引用说明结束**************//

}//判断选项1值为0结束

 

if(a.value!==0 && ob == b){//判断需要禁用的选项目
//**********引用说明开始***************//
//将代码向后添加引用方式
//此处条件为 首列值不为0,并且当前选中项目要与第N项相等才成立
//条件成立后需要将之后的各项全部置为只读并且清空内部数据
//ClearOption(object); //清除目标行
//object.disabled = true;//目标设置为只读
//**********引用说明结束**************//

ClearOption(c);
c.disabled = true;

ClearOption(d);//引用1
d.disabled = true;//引用1

ClearOption(e);//引用2
e.disabled = true;//引用2

}//判断需要禁用的选项目结束

if(b.value!==0 && ob == c)//引用方式1
{
ClearOption(d);d.disabled = true;
ClearOption(e);e.disabled = true;
}//引用方式1结束

if(c.value!==0 && ob == d)//引用方式2
{ClearOption(e);e.disabled = true;}//引用方式2结束

 

}//函数结束

function ClearOption(ob){//清除选项
var l = ob.length;
ob.disabled=true;
for(i=1;i<l;l--){ob.remove(i);}
}

//--->
</script>

</body>
</HTML>

提示:您可以先修改部分代码再运行

时间: 2025-01-09 07:12:17

js无限级关联下拉列表代码的相关文章

asp无限级分类加js收缩伸展功能代码

为了方便使用分类,我定义了一个分类表category,里面字段是id(自动编号)  cat_name(分类名) parent_id(父ID,对应本表ID) cat_order(顺序) is_show(是否显示)  u_id(这个用来区别是新闻分类,还是产品分类,还是其他分类),为了方便,我将这些分类全部放在这张表中.在给客户添加分类的时候,结果有太多的分类,本来前台显示的时候,将它们全部显示出来了,好长.客户提出修改意见,要求将它们改成点击大分类,才可以将其子分类显示出来,并且每个分类下面还有一

JS实现支持多选的遍历下拉列表代码_javascript技巧

本文实例讲述了JS实现支持多选的遍历下拉列表.分享给大家供大家参考.具体如下: 这里使用js实现可进行多项选择的下拉列表,鼠标点击上边下拉列表中的任意值,下边列表中就会显示该选中值,按住键盘上的Ctrl键,再次点击上边的列表任意值,可进行多选,多选功能得益于JavaScript的帮忙,在网页上这种应用挺广泛,有必要看一看. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-option-cha-codes/ 具体代码如下: <!

ASP实例教程:asp无限级显示分类代码

为了方便使用分类,我定义了一个分类表category,里面字段是id(自动编号)  cat_name(分类名) parent_id(父ID,对应本表ID) cat_order(顺序) is_show(是否显示)  u_id(这个用来区别是新闻分类,还是产品分类,还是其他分类),为了方便,我将这些分类全部放在这张表中.在给客户添加分类的时候,结果有太多的分类,本来前台显示的时候,将它们全部显示出来了,好长.客户提出修改意见,要求将它们改成点击大分类,才可以将其子分类显示出来,并且每个分类下面还有一

js html-在线等,急(大神帮帮忙):js动态嵌入html代码,代码中调用函数,当传参为字符串时,函数没有响应

问题描述 在线等,急(大神帮帮忙):js动态嵌入html代码,代码中调用函数,当传参为字符串时,函数没有响应 <!DOCTYPE html> <br> function insert()<br> {<br> var a="jioho";<br> var str="<table><tr><button type='button' onclick='test("+ a+"

js 三级关联菜单效果实例_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

利用JS延迟加载百度分享代码,提高网页速度

发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示. 这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码 代码如下: <!-- Baidu Button BEGIN --> <div id=&q

js异步动态加载js与css文件代码

 jquery动态加载css,js文件方法简单很, 例 方法1: 代码如下 $.getscript("test.js"); 方法2: 代码如下 function loadjs(file){  var head = $('head').remove('#loadscript');  $("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:

两种js获取当前域名代码

 今天给各位朋友介绍两种js获取当前域名  代码如下 //获取当前域名 1.window.location.host; 2.document.domain; //获取当前页面地址 url = window.location.href;   例子  代码如下 <script language="javascript"> //获取域名 host = window.location.host; host2=document.domain; //获取页面完整地址 url = win

js添加marquee的代码...........

问题描述 js添加marquee的代码........... 我想为这些name加上marquee效果 求代码 只能用JS写 解决方案 var list=[/*.....................*/] for(var i=0;i<list.length;i++)document.write('<marquee>'+list[i].name+'</marquee>')