网站制作学习网JS脚本→正文:无限下拉菜单
字体:

无限下拉菜单

JS脚本 2009/3/3 9:34:13  点击:不统计

<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>

·上一篇:鼠标放图片上图片显示大图 >>    ·下一篇:innerHTML outerHTML 区别 >>
推荐文章
最新文章