JavaScript实现二级联动全选

最新推荐文章于 2022-05-23 21:07:48 发布

xi5566

最新推荐文章于 2022-05-23 21:07:48 发布

阅读量262

点赞数

分类专栏： JAVA文章文章标签： JavaScript HTML ViewUI

JAVA文章专栏收录该内容

40 篇文章 0 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>

 </HEAD>

 <BODY>
	<form name="f1">
		<select name="s1" onChange="aa(this.options.selectedIndex)" >
			<option selected>请选择</option>
			<option value="hk">1</option>
			<option value="sy">2</option>
			<option value="smk">3</option>
		</select>
		<select name="s2">
		</select>

	</form> 



<SCRIPT LANGUAGE="JavaScript">
<!--
	var s1leng=document.f1.s1.options.length;//取得s1的长度
	var temp=new Array(s1leng);//有多少长度就new多少对象
	for(i=0;i<s1leng;i++){
		temp[i]=new Array();//2为数组
	}
	temp[0][0]=new Option("请选择", " "); 

	temp[1][0]=new Option("11","");
	temp[1][1]=new Option("12","");

	temp[2][0]=new Option("21","");
	temp[2][1]=new Option("22","");

	temp[3][0]=new Option("31","");
	temp[3][1]=new Option("32","");


	function aa(x){
		var s22=document.f1.s2;
		while(s22.length>0){
			s22.options[0]=null;
		}

		for(i=0;i<temp[x].length;i++){
			s22.options[i]=new Option(temp[x][i].text,temp[x][i].value);
			s22.options[0].selected=true;
		}


	}


//-->
</SCRIPT>


 </BODY>
</HTML>


<HTML>
<HEAD>
<TITLE> 全部选中 </TITLE>
<SCRIPT language=javascript>

function CheckAll(form)
{

/*
  for (var i=0;i<form.staff.length;i++){
	alert(document.getElementsByTagName("input")[i].checked);
  }
*/

//  alert(form.elements[2].name)

  for (var i=0;i<form.staff.length;i++)
  {
       form.staff[i].checked = form.chkAll.checked;
  }

}

</script>
</HEAD>

<BODY>
<form action="" name="form1">
<TABLE border="1">
<TR>
	<TH><input name="chkAll" type="checkbox" id="chkAll" onclick=CheckAll(this.form) value="checkbox"></TH>
	<TH>编号</TH>
	<TH>姓名</TH>
	<TH>成绩</TH>
	<TH>浏览</TH>
	<TH>删除</TH>
	<TH>修改</TH>
</TR>
<TR>
	<TD><input name="staff" type="checkbox" value="1001"></TD>
	<TD>1001</TD>
	<TD>小陈</TD>
	<TD>80</TD>
	<TD><a href="">浏览</a></TD>
	<TD><a href="">删除</a></TD>
	<TD><a href="">修改</a></TD>
</TR>
<TR>
	<TD><input name="staff" type="checkbox" value="1002"></TD>
	<TD>1002</TD>
	<TD>小张</TD>
	<TD>90</TD>
	<TD><a href="">浏览</a></TD>
	<TD><a href="">删除</a></TD>
	<TD><a href="">修改</a></TD>
</TR>
<TR>
	<TD><input name="staff" type="checkbox" value="1003"></TD>
	<TD>1003</TD>
	<TD>小李</TD>
	<TD>78</TD>
	<TD><a href="">浏览</a></TD>
	<TD><a href="">删除</a></TD>
	<TD><a href="">修改</a></TD>
</TR>
<TR>
	<TD><input name="staff" type="checkbox" value="1003"></TD>
	<TD>1004</TD>
	<TD>小王</TD>
	<TD>68</TD>
	<TD><a href="">浏览</a></TD>
	<TD><a href="">删除</a></TD>
	<TD><a href="">修改</a></TD>
</TR>
<TR>
	<TD><input name="staff" type="checkbox" value="1003"></TD>
	<TD>1005</TD>
	<TD>小许</TD>
	<TD>84</TD>
	<TD><a href="">浏览</a></TD>
	<TD><a href="">删除</a></TD>
	<TD><a href="">修改</a></TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>

移动下拉列表


<HTML>
<HEAD>
<TITLE> 移动下拉列表 </TITLE>
<SCRIPT language=javascript>

function move(source,target)
{
    while(source.selectedIndex>-1){
    var sourceOpt = source.options[source.selectedIndex];  //取出数据
    //var newOpt = document.createElement("OPTION"); //创建一个Option对象
    target.appendChild(sourceOpt);  //先添加，后赋值	
    sourceOpt.value = sourceOpt.value;
    sourceOpt.text = sourceOpt.text;
    source.removeChild(sourceOpt);
    }
}

</script>
</HEAD>

<BODY>
<form action="" name="form1">
<TABLE border="1" align="center">
<TR>
	<TH>用户权限</TH>
	<TH>操作</TH>
	<TH>系统权限</TH>

</TR>
<TR>
	<TD>
   <SELECT NAME="userPurview" multiple="yes" size="9"  style="width:100px;">
   <option value="sys">系统管理</option>
   <option value="purview">权限管理</option>
   <option value="personal">公众客户管理</option>
   <option value="staff">员工管理</option>
   </SELECT>

    </TD>
	<TD>
	<BR>
	<BR><div align="center">
	<INPUT TYPE="button" value=">>" onclick="move(userPurview,sysPurview)"><BR><BR>
	<INPUT TYPE="button" value="<<"  onclick="move(sysPurview,userPurview)"><div>
	<BR><BR>
	<BR><BR>
    </TD>
	<TD>

	<SELECT NAME="sysPurview"  multiple="yes" size="9"  style="width:100px;">
    </SELECT></TD>

</TR>

</TABLE>
</form>
</BODY>
</HTML>