Javascript實現三級聯動選單

javascript

公司有人要，寫了一個，放上來，有要得copy去用吧，下面是第一種option的value和text是一個值得方式，下面再貼不同值得方式。

運行代碼框

<form method="post" name="test"><select name="select1" ></select><select name="select2"></select><select name="select3"></select></form><script language="javascript"><!--//copyright siginie(siginie@hotmail.com),www.3ad.cnvar 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>

    [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]