当前页面: 开发资料首页 → Javascript 专题 → Javascript实现三级联动选单

Javascript实现三级联动选单

摘要: Javascript实现三级联动选单

<tr> <td>

公司有人要，写了一个，放上来，有要得copy去用吧，下面是第一种option的value和text是一个值得方式，下面再贴不同值得方式。

运行代码框

<textarea class=fm id=code style="WIDTH: 557px; HEIGHT: 174px" rows=12 cols=88><form method="post" name="test"> <select name="select1" onchange="select()"></select> <select name="select2"></select> <select name="select3"></select> </form> <script language="javascript"> //copyright siginie(siginie@hotmail.com),www.3ad.cn var arrText = new Array(5); var arrValue = new Array(arrText.length); function objSetOption(select1, select2, select3) { this.select1 = select1; this.select2 = select2; this.select3 = select3; } arrText[0]= new objSetOption("选择1:", "选择2_1:,选择2_2:", "选择3_1:,选择3_2:"); arrText[1] = new objSetOption("论文:1", "语文:1,数学:2,英语:3", "初中:2,高中:3"); arrText[2] = new objSetOption("例题:2", "显示b2_1:值b2_1,显示b2_2:值b2_2", "显示b3_1:值b3_1,显示b3_2:值b3_2"); arrText[3] = new objSetOption("显示c:值c", "显示c2_1:值c2_1,显示c2_2:值c2_2", "显示c3_1:值c3_1,显示c3_2:值c3_2"); arrText[4] = new objSetOption("显示d:值d", "显示d2_1:值d2_1,显示d2_2:值d2_2", "显示d3_1:值d3_1,显示d3_2:值d3_2"); arrText[5] = new objSetOption("显示e:值e", "显示e2_1:值e2_1,显示e2_2:值e2_2", "显示e3_1:值e3_1,显示e3_2:值e3_2"); function select() { var eltSelect1 = document.test.select1; var eltSelect2 = document.test.select2; var eltSelect3 = document.test.select3; var arrSelect1, arrSelect2, arrSelect3; var arrData1, arrData2, arrData3; with(eltSelect1) { var strSelect = options[selectedIndex].value; } for(i = 0;i < arrText.length;i ++) { arrSelect1 = arrText[i].select1; arrData1 = arrSelect1.split(":"); if (arrData1[1] == strSelect) { arrSelect2 = (arrText[i].select2).split(","); for(j = 0;j < arrSelect2.length;j++) { arrData2 = arrSelect2[j].split(":"); with(eltSelect2) { length = arrSelect2.length; options[j].text = arrData2[0]; options[j].value = arrData2[1]; } } arrSelect3 = (arrText[i].select3).split(","); for(j = 0;j < arrSelect3.length;j++) { arrData3 = arrSelect3[j].split(":"); with(eltSelect3) { length = arrSelect3.length; options[j].text = arrData3[0]; options[j].value = arrData3[1]; } } break; } } } function init() { var eltSelect1 = document.test.select1; var eltSelect2 = document.test.select2; var eltSelect3 = document.test.select3; var arrSelect1, arrSelect2, arrSelect3; var arrData1, arrData2, arrData3; if (eltSelect1 != undefined && eltSelect2 != undefined && eltSelect3 != undefined) { with(eltSelect1) { length = arrText.length; for(i = 0;i < arrText.length;i ++) { arrSelect1 = arrText[i].select1; arrData1 = arrSelect1.split(":"); options[i].text = arrData1[0]; options[i].value = arrData1[1]; } } with(eltSelect2) { arrSelect2 = (arrText[0].select2).split(","); length = arrSelect2.length; for(i = 0;i < length;i ++) { arrData2 = arrSelect2[i].split(":"); options[i].text = arrData2[0]; options[i].value = arrData2[1]; } } with(eltSelect3) { arrSelect3 = (arrText[0].select3).split(","); length = arrSelect3.length; for(i = 0;i < length;i ++) { arrData3 = arrSelect3[i].split(":"); options[i].text = arrData3[0]; options[i].value = arrData3[1]; } } } } init(); // </script></textarea>

<input style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code')" type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code) type=button value=另存代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</td> </tr> </table>
↑返回目录
前一篇: 网页播放技术-鼠标拖动歌词定位播放
后一篇: UBB,剪贴板,textRange及其他