自个写了一个感觉代码非常少的三级级联

最新推荐文章于 2024-10-02 05:39:15 发布

sxpyrgz

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量475

点赞数

分类专栏： javascript 文章标签： function javascript html

本文链接：https://blog.csdn.net/sxpyrgz/article/details/2568373

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<html>    

<head>    

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">    

<title></title>  

<script language="javascript">    

   	function selectChange(sel,selid){

		var selectValue=[	{name:"二级11",id:"11",value:"111"},

					{name:"二级12",id:"11",value:"112"},

					{name:"二级13",id:"11",value:"113"},

					{name:"三级1",id:"111",value:"111"},

					{name:"三级2",id:"111",value:"112"},

					{name:"三级3",id:"111",value:"113"},

					{name:"二级21",id:"12",value:"111"},

					{name:"二级22",id:"12",value:"112"},

					{name:"二级23",id:"12",value:"113"}

				];

		alert(sel.value);

		var sel2temp=document.getElementById(selid);

		alert(sel2temp.value);

		selectClear(sel2temp);

		for(var i=0;i<selectValue.length;i++){

			if(sel.value==selectValue[i].id){

				selectAdd(sel2temp,selectValue[i].name,selectValue[i].value);	

			}

		}

		sel2temp.onchange();

		

	}

	function selectAdd(sel,name,value){

		var option = document.createElement("option");

		option.setAttribute("value",value);

		option.appendChild(document.createTextNode(name));

		sel.appendChild(option);

	}

	function selectClear(sel){

		while(sel.childNodes.length>0){

			sel.removeChild(sel.childNodes(0));	

		}

	}

	function init(){

		var sel1temp=document.getElementById("sel1");

		//selectClear(sel1temp);

		//selectAdd(sel1temp,"aaaaa","11");

		//selectAdd(sel1temp,"bbbbb","22");

	}

	

</script>  

</head>  

<body οnlοad="init()"> 

<select name="sel1" id="sel1" οnchange="selectChange(this,'sel2')">

<option value="11">一级1</option>

<option value="12">一级2</option>

<option value="13">一级3</option>

<option value="14">一级4</option>

</select>

<select name="sel2" id="sel2" οnchange="selectChange(this,'sel3')">

<option value="21">二级1</option>

</select>

<select name="sel3" id="sel3" οnchange="">

<option value="31">三级1</option>

</select>



</body>  

</html>