Javascript实现三级联动选单

该代码演示页面：点此查看代码演示

代码:

<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([email protected]),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.select1;
                arrData1 = arrSelect1.split(":");
                if (arrData1[1] == strSelect) {
                        arrSelect2 = (arrText.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.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.select1;
                                arrData1 = arrSelect1.split(":");
                                options.text = arrData1[0];
                                options.value = arrData1[1];
                        }
                }
                with(eltSelect2) {
                        arrSelect2 = (arrText[0].select2).split(",");
                        length = arrSelect2.length;
                        for(i = 0;i < length;i ++) {
                                arrData2 = arrSelect2.split(":");
                                options.text = arrData2[0];
                                options.value = arrData2[1];
                        }
                }
                with(eltSelect3) {
                        arrSelect3 = (arrText[0].select3).split(",");
                        length = arrSelect3.length;
                        for(i = 0;i < length;i ++) {
                                arrData3 = arrSelect3.split(":");
                                options.text = arrData3[0];
                                options.value = arrData3[1];
                        }
                }
        }
}

init();
// -->
</script>