纯JS，用了大概140行，感觉有点多，谁有更简洁的一起交流下吧~
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>静态四级联动下拉菜单</title>
<script>
//页面载入时初始化
window.onload = function(){
var arrSel=["one","two","three","four"];//定义各下拉框的Id，要与html里的一致
var i=0,arrData=[];
arrData[i++]=["A","A1","A11","0"] //定义全部下拉项
arrData[i++]=["A","A1","A12","1"]
arrData[i++]=["A","A2","A21","2"]
arrData[i++]=["A","A2","A22","3"]
arrData[i++]=["B","B1","B11","4"]
arrData[i++]=["B","B1","B12","5"]
arrData[i++]=["B","B2","B21","6"]
arrData[i++]=["B","B2","B22","7"]
arrData[i++]=["C","C1","C11","8"]
arrData[i++]=["C","C2","C21","9"]
arrData[i++]=["C","C3","C31","0"]
//初始化list1
var list1=document.getElementById(arrSel[0]);
for (i=0;i<arrData.length;i++)
{
if(i<arrData.length-1 && arrData[i][0]==arrData[i+1][0]) continue;
var option=document.createElement("option");
option.value = arrData[i][0];
option.innerHTML = arrData[i][0];
list1.appendChild(option);
}
//初始化list2
var list2=document.getElementById(arrSel[1]);
for (i=0;i<arrData.length;i++)
{
if(arrData[i][0]!= list1[0].text ) break;
if(arrData[i][0]==arrData[i+1][0] && arrData[i][1]==arrData[i+1][1]) continue;
var option=document.createElement("option");
option.value = arrData[i][1];
option.innerHTML = arrData[i][1];
list2.appendChild(option);
}
//初始化list3
var list3=document.getElementById(arrSel[2]);
for (i=0;i<arrData.length;i++)
{
if(arrData[i][1]!= list2[0].text ) break;
if(arrData[i][1]==arrData[i+1][1] && arrData[i][2]==arrData[i+1][2]) continue;
var option=document.createElement("option");
option.value = arrData[i][2];
option.innerHTML = arrData[i][2];
list3.appendChild(option);
}
//初始化list4
var list4=document.getElementById(arrSel[3]);
for (i=0;i<arrData.length;i++)
{
if(arrData[i][2]!= list3[0].text ) break;
if(arrData[i][2]==arrData[i+1][2] && arrData[i][3]==arrData[i+1][3]) continue;
var option=document.createElement("option");
option.value = arrData[i][3];
option.innerHTML = arrData[i][3];
list4.appendChild(option);
}
//list1改变时触发
list1.onchange= function(){
list2.length=0;
list3.length=0;
list4.length=0;
//list2
var selectedText1=list1[list1.selectedIndex].text;
for (i=0;i<arrData.length;i++)
{
if(arrData[i][0]!= selectedText1) continue;
if(i<arrData.length-1 && arrData[i][0]==arrData[i+1][0] && arrData[i][1]==arrData[i+1][1]) continue;
var option=document.createElement("option");
option.innerHTML = arrData[i][1];
list2.appendChild(option);
}
//list3
var selectedText2=list2[list2.selectedIndex].text;
for (i=0;i<arrData.length;i++)
{
if(arrData[i][0]!= selectedText1 || arrData[i][1]!= selectedText2) continue;
if(i<arrData.length-1 && arrData[i][1]==arrData[i+1][1] && arrData[i][2]==arrData[i+1][2]) continue;
var option=document.createElement("option");
option.innerHTML = arrData[i][2];
list3.appendChild(option);
}
//list4
var selectedText3=list3[list3.selectedIndex].text;
for (i=0;i<arrData.length;i++)
{
if(arrData[i][0]!= selectedText1 || arrData[i][1]!= selectedText2 || arrData[i][2]!= selectedText3) continue;
if(i<arrData.length-1 && arrData[i][2]==arrData[i+1][2] && arrData[i][3]==arrData[i+1][3]) continue;
var option=document.createElement("option");
option.innerHTML = arrData[i][3];
list4.appendChild(option);
}
}
//list2改变时触发
list2.onchange= function(){
list3.length=0;
list4.length=0;
//list3
var selectedText2=list2[list2.selectedIndex].text;
for (i=0;i<arrData.length;i++)
{
if(arrData[i][1]!= selectedText2) continue;
if(i<arrData.length-1 && arrData[i][1]==arrData[i+1][1] && arrData[i][2]==arrData[i+1][2]) continue;
var option=document.createElement("option");
option.innerHTML = arrData[i][2];
list3.appendChild(option);
}
//list4
var selectedText3=list3[list3.selectedIndex].text;
for (i=0;i<arrData.length;i++)
{
if(arrData[i][1]!= selectedText2 || arrData[i][2]!= selectedText3) continue;
if(i<arrData.length-1 && arrData[i][2]==arrData[i+1][2] && arrData[i][3]==arrData[i+1][3]) continue;
var option=document.createElement("option");
option.innerHTML = arrData[i][3];
list4.appendChild(option);
}
}
//list3改变时触发
list3.onchange= function(){
list4.length=0;
//list4
var selectedText3=list3[list3.selectedIndex].text;
for (i=0;i<arrData.length;i++)
{
if(arrData[i][2]!= selectedText3) continue;
if(i<arrData.length-1 && arrData[i][2]==arrData[i+1][2] && arrData[i][3]==arrData[i+1][3]) continue;
var option=document.createElement("option");
option.innerHTML = arrData[i][3];
list4.appendChild(option);
}
}
}
</script>
</head>
<body >
静态的四级联动，感觉代码有点长了，谁有更简洁的代码,交流下~~ <br/>
QQ:1140215489
<br/> <br/>
<select id="one" name=one> </select>
<select id="two" name=two> </select>
<select id="three" name=three> </select>
<select id="four" name=four> </select>
</body>
</html>