JS三级联动选单

<form method="post" name="test">
 <select name="select1" οnchange="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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值