静态四级联动下拉菜单 感兴趣的来交流下~解决方法
日期：2014-05-16 浏览次数：20296 次
静态四级联动下拉菜单 感兴趣的来交流下~
纯JS，用了大概140行，感觉有点多，谁有更简洁的一起交流下吧~
纯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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
