📄 13-7.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>3级级联下拉列表 </TITLE>
<META http-equiv="content-type" CONTENT="text/html;charset=gb2312">
<META NAME="Author" CONTENT="CZH;czh44@sohu.com">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*--------------------------------\
| Authored by CZH;czh44@sohu.com |
\--------------------------------*/
var types="家电,服饰,家具,日用";
var sub_types_str="电视机,洗衣机,电冰箱,空调|外套,衬衣,大衣,裤子|书桌,书柜,饭桌,衣柜|清洁,洗发,纸品,厨房";
var sub_types_str2="海尔,海信,长虹,夏华^惠尔,浦海尔,海鸥^海尔,飞利浦,爱立信^志高,科龙,海尔,长虹"
+"|"
+"外套1,外套2,外套3,外套4^衬衣1,衬衣2,衬衣3^大衣1,大衣2,大衣3^裤子1,裤子2"
+"|"
+"书桌1,书桌2,书桌3^书柜1,书柜2^饭桌1,饭桌2,饭桌3^衣柜1,衣柜2"
+"|"
+"清洁1,清洁2,清洁3^洗发1,洗发2,洗发3^纸品1,纸品2,纸品3^厨房1,厨房2,厨房3"
var type_ids_str="0,1,2,3";
var subtype_ids_str="001,002,003,004|101,102,103,104|201,202,203,204|301,302,303,304";
var subtype_ids_str2="0011,0012,0013,0014^0021,0022,0023^0031,0032,0033^0041,0042,0043,0044"
+"|"
+"1011,1012,1013,1014^1021,1022,1023^1031,1032,1033^1041,1042"
+"|"
+"2011,2012,2013^2021,2022^2031,2032,2033^2041,2042"
+"|"
+"3011,3012,3013^3021,3022,3023^3031,3032,3033^3041,3042,3043";
var the_split1=",";
var the_split2="|";
var the_split3="^";
var goods_types=types.split(the_split1);
var type_ids=type_ids_str.split(the_split1);
var sub_types=sub_types_str.split(the_split2); //元素为以,隔开的mode串
var subtypes_ids=subtype_ids_str.split(the_split2);
var sub_types2=sub_types_str2.split(the_split2);
var subtypes_ids2=subtype_ids_str2.split(the_split2);
var index1=0;
var index2=0;
function select()
{
with(document.goods.gtype)
{
var type_sel=options[selectedIndex].text;
}
for(var i=0;i<goods_types.length;i++)
{
if(goods_types[i]==type_sel)
{
index1 = i; //记录第一级下拉菜单被选项索引
var now_subtypes=sub_types[i].split(the_split1);
var now_subtype_ids=subtypes_ids[i].split(the_split1);
document.goods.gsub_type.options.length=0;
document.goods.gsub_type.options.length=now_subtypes.length;
with(document.all.goods.gsub_type)
{
for(var j=0;j<now_subtypes.length;j++)
{
options[j].text=now_subtypes[j];
options[j].value=now_subtype_ids[j];
}
}
break;
}
}
select2(); //当第2级变化时,同时变化第3级下拉列表
}
//-------
function select2()
{
with(document.goods.gsub_type)
{
var subtype_sel=options[selectedIndex].text;
}
var subtypes_second = sub_types[index1].split(the_split1);
for(var i=0;i<subtypes_second.length;i++)
{
if(subtypes_second[i]==subtype_sel)
{
index2 = i; //记录第二级下拉菜单被选项索引
var now_subtypes_second=sub_types2[index1].split(the_split3);
var now_subtypes_three=now_subtypes_second[index2].split(the_split1);
var now_subtype_ids_second=subtypes_ids2[index1].split(the_split3);
var now_subtype_ids_three=now_subtype_ids_second[index2].split(the_split1);
document.goods.gsub_type2.options.length=0;
document.goods.gsub_type2.options.length=now_subtypes_three.length;
with(document.all.goods.gsub_type2)
{
for(var k=0;k<now_subtypes_three.length;k++)
{
options[k].text=now_subtypes_three[k];
options[k].value=now_subtype_ids_three[k];
}
}
break;
}
}
}
//
function initial_select()
{
document.goods.gtype.length=goods_types.length;
with(document.goods.gtype)
{
for(var i=0;i<goods_types.length;i++)
{
options[i].text=goods_types[i];
options[i].value=type_ids[i];
}
options[selectedIndex].text=goods_types[0];
options[selectedIndex].value=type_ids[0];
}
var now_subtypes2=sub_types[0].split(the_split1);
//初始化第2级下拉列表
var now_subtype_ids2=subtypes_ids[0].split(the_split1);
document.goods.gsub_type.options.length=now_subtypes2.length;
with(document.goods.gsub_type)
{
for(var j=0;j<now_subtypes2.length;j++)
{
options[j].text=now_subtypes2[j];
options[j].value=now_subtype_ids2[j];
}
}
//初始化第3级下拉列表
var temp_subtypes3=sub_types2[0].split(the_split3);
var now_subtypes3=temp_subtypes3[0].split(the_split1);
var temp_subtype_ids3=subtypes_ids2[0].split(the_split3);
var now_subtype_ids3=temp_subtype_ids3[0].split(the_split1);
document.goods.gsub_type2.options.length=now_subtypes3.length;
with(document.goods.gsub_type2)
{
for(var j=0;j<now_subtypes3.length;j++)
{
options[j].text=now_subtypes3[j];
options[j].value=now_subtype_ids3[j];
}
}
}
//-->
</SCRIPT>
<BODY>
<form name="goods">
<select name="gtype" onchange="select()" style="width:100">
</select>
<select name="gsub_type" onchange="select2()" style="width:100">
</select>
<select name="gsub_type2" style="width:100">
</select>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!--
initial_select();
//-->
</SCRIPT>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -