|
蓝森林 http://www.lslnet.com 2006年8月25日 8:28
 JS三级联动选单，转
公司有人要，写了一个，放上来，有要得copy去用吧，下面是第一种option的value和text是一个值得方式，下面再贴不同值得方式。
生平第一次写JS连改都没改就搞定了~~
[html]
<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>
[/html] |
| 不错咯 |
这个不难吧。
要是除了check select外能换个方法就好了。
check select代码量太大了，而且不易读。
|
生平````晕``啊~~~~
不过如果是真的话,还不错啊` |
| 早就有了哦，阿里巴巴后台就一直用的用的这个 |
| 真的不错，呵呵，佩服！！！！！！ |
能不能弄个初始化参数上去啊。就是调用的时候init()里加入三个初始值，如init(a,b,c)
难道在<select>里显示出这三个初始值，而不是默认的第一组“选择1”，“选择2”，“选择3－1”的。 |
不好意思~~~很多天了才看到~~~
上回应我们的人要求，盖了带出初始化的~，代码是很简单，所以顺手发上来，方便大家copy使用~~一开始的确是一次成型啊，写完了一运行就正确，没提示错误。
[html]
<form method="post" name="myform">
<select name="classid" onchange="select()"></select>
<select name="suid"></select>
<select name="gid"></select>
</form>
<script language="javascript">
<!--
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(sValue1, sValue2, sValue3) {
var eltSelect1 = document.myform.classid;
var eltSelect2 = document.myform.suid;
var eltSelect3 = document.myform.gid;
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];
if (arrData2[1] == sValue2) {
options[j].selected = true;
}
}
}
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];
if (arrData3[1] == sValue3) {
options[j].selected = true;
}
}
}
break;
}
}
}
function init(sValue1, sValue2, sValue3) {
var eltSelect1 = document.myform.classid;
var eltSelect2 = document.myform.suid;
var eltSelect3 = document.myform.gid;
var arrSelect1, arrSelect2, arrSelect3;
var arrData1, arrData2, arrData3;
if (eltSelect1 != undefined && eltSelect2 != undefined && eltSelect3 != undefined) {
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];
}
}
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];
if (arrData1[1] == sValue1) {
options[i].selected = true;
select("", sValue2, sValue3);
}
}
}
}
}
//init();
init("2", "值b2_1", "值b3_2");
// -->
</script>
[/html] |
|
