下拉联动菜单改成用复选框实现

作者：袖梨 2022-07-02

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w***3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<title>级联菜单</title>
<style type="text/<a href=" http: target="_blank">css">
fieldset{
	font-size:12px; margin:5px 0 0 0;}
</style>
<script type="text/javascript">
window.onload=function(){
	var arr=new Array();
	for(var i=0;i<3;i++){
		arr[i]=new Array();
	}
		arr[0][0]="苹果";
		arr[0][1]="香蕉";
		arr[0][2]="梨子";
		
		arr[1][0]="白菜";
		arr[1][1]="萝卜";
		arr[1][2]="番茄";
		arr[1][3]="土豆";
		
		arr[2][0]="鸭子";
		arr[2][1]="鸡娃子";
		arr[2][2]="狗";
		arr[2][3]="猪肉";
	function $(id){return document.getElementById(id);}
		$("BigClass").onchange=changes;
	function changes(){
		//$("BigClass").selectedIndex=0;
		var newValue=$("BigClass").options[$("BigClass").selectedIndex].value;
		$("changeCheck").innerHTML="";
		for(var i=0;i<arr[newValue].length;i++){
			createCheck("sg",i);
			var txt=document.createTextNode(arr[newValue][i]);
			$("changeCheck").appendChild(txt);
		}
		
	}
	function createCheck(name,value){
	
		var checkbox=document.createElement("input");
			checkbox.setAttribute("type","checkbox");
			checkbox.setAttribute("value",value);
			checkbox.setAttribute("name",name);
			$("changeCheck").appendChild(checkbox);
			
	}
	 
}
</script>

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

下拉联动菜单改成用复选框实现

相关文章

精彩推荐