javascript实现多级联动下拉菜单的方法
本文实例讲述了javascript实现多级联动下拉菜单的方法。分享给大家供大家参考。具体实现方法如下：
<SCRIPTLANGUAGE="JavaScript">
<!--Begin
vararrItems1=newArray();
vararrItemsGrp1=newArray();
arrItems1[3]="列二";
arrItemsGrp1[3]=1;
arrItems1[4]="列二三";
arrItemsGrp1[4]=1;
arrItems1[5]="列二四";
arrItemsGrp1[5]=1;
arrItems1[6]="列三";
arrItemsGrp1[6]=2;
arrItems1[7]="列三一";
arrItemsGrp1[7]=2;
arrItems1[0]="列四";
arrItemsGrp1[0]=3;
arrItems1[1]="列四一";
arrItemsGrp1[1]=3;
arrItems1[2]="列四二";
arrItemsGrp1[2]=3;
vararrItems2=newArray();
vararrItemsGrp2=newArray();
arrItems2[21]="列4-0";
arrItemsGrp2[21]=0
arrItems2[22]="列4-1";
arrItemsGrp2[22]=0
arrItems2[31]="列41-0";
arrItemsGrp2[31]=1
arrItems2[34]="列41-1";
arrItemsGrp2[34]=1
arrItems2[35]="列42-0";
arrItemsGrp2[35]=2
arrItems2[99]="列24-2";
arrItemsGrp2[99]=5
arrItems2[100]="列24-1";
arrItemsGrp2[100]=5
arrItems2[57]="列24-0";
arrItemsGrp2[57]=5
arrItems2[101]="列2-0";
arrItemsGrp2[101]=3
arrItems2[102]="列2-1";
arrItemsGrp2[102]=3
arrItems2[103]="列23-0";
arrItemsGrp2[103]=4
arrItems2[104]="列23-1";
arrItemsGrp2[104]=4
arrItems2[105]="列3-0";
arrItemsGrp2[105]=6
arrItems2[106]="列3-1";
arrItemsGrp2[106]=6
arrItems2[200]="列31-0";
arrItemsGrp2[200]=7
arrItems2[201]="列31-1";
arrItemsGrp2[201]=7
arrItems2[203]="列31-2";
arrItemsGrp2[203]=7
functionselectChange(control,controlToPopulate,ItemArray,GroupArray)
{
varmyEle;
varx;
//Emptytheseconddropdownboxofanychoices
for(varq=controlToPopulate.options.length;q>=0;q--)controlToPopulate.options[q]=null;
if(control.name=="firstChoice"){
//Emptythethirddropdownboxofanychoices
for(varq=myChoices.thirdChoice.options.length;q>=0;q--)myChoices.thirdChoice.options[q]=null;
}
//ADDDefaultChoice-incasetherearenovalues
myEle=document.createElement_x("option");
myEle.value=0;
myEle.text="[列表]";
controlToPopulate.add(myEle);
for(x=0;x<ItemArray.length ;x++)
{
if(GroupArray[x]==control.value)
{
myEle=document.createElement_x("option");
myEle.value=x;
myEle.text=ItemArray[x];
controlToPopulate.add(myEle);
}
}
}
// End-->
</script>
<formname=myChoices>
<tablealign="center">
<tr>
<td>
<SELECTid=firstChoicename=firstChoiceonchange="selectChange(this,myChoices.secondChoice,arrItems1,arrItemsGrp1);">
<optionvalue="0">列表一</option>
<optionvalue="1">列表二</option>
<optionvalue="2">列表三</option>
<optionvalue="3">列表四</option>
</SELECT>
</TD><TD>
<SELECTid=secondChoicename=secondChoiceonchange="selectChange(this,myChoices.thirdChoice,arrItems2,arrItemsGrp2);">
</SELECT>
<SELECTid=thirdChoicename=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>
希望本文所述对大家的javascript程序设计有所帮助。