能够根据自定义的菜单数据和select，自动设置联级的下拉菜单，可定义默认值。
效果：
其中参数1是菜单结构：
菜单对象
var menu = [ {'val': '1', 'txt': 'value'}, {'val': '2 ->', 'menu': [ {'val': '2_1'}, {'val': '2_2'} ]}, {'val': '3 ->', 'menu': [ {'val': '3_1 ->', 'menu': [ {'val': '3_1_1'}, {'val': '3_1_2'} ]}, {'val': '3_2'} ]}, {'val': '4 ->', 'menu': [ {'val': '4_1 ->', 'menu': [ {'val': '4_1_1 ->', 'menu': [ {'val': '4_1_1_1'} ]} ]} ]} ];
参数2是select的id集合(按顺序)：
var
sel
=
[
"
sel1
"
,
"
sel2
"
,
"
sel3
"
,
"
sel4
"
,
"
sel5
"
]
可设置默认值(按顺序)：
var
val
=
[
"
3 ->
"
,
"
3_1 ->
"
,
"
3_1_2
"
];
源码：
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>
<
title
>
JavaScript 自定义多级联动下拉菜单
</
title
>
<
script
type
="text/javascript"
>
var
$
=
function
(id) {
return
"
string
"
==
typeof
id
?
document.getElementById(id) : id; };
function
addEventHandler(oTarget, sEventType, fnHandler) {
if
(oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler,
false
); }
else
if
(oTarget.attachEvent) { oTarget.attachEvent(
"
on
"
+
sEventType, fnHandler); }
else
{ oTarget[
"
on
"
+
sEventType]
=
fnHandler; } };
function
Each(arrList, fun){
for
(
var
i
=
0
, len
=
arrList.length; i
<
len; i
++
) { fun(arrList[i], i); } };
function
GetOption(val, txt) {
var
op
=
document.createElement(
"
OPTION
"
); op.value
=
val; op.innerHTML
=
txt;
return
op; };
var
Class
=
{ create:
function
() {
return
function
() {
this
.initialize.apply(
this
, arguments); } } } Object.extend
=
function
(destination, source) {
for
(
var
property
in
source) { destination[property]
=
source[property]; }
return
destination; }
var
CascadeSelect
=
Class.create(); CascadeSelect.prototype
=
{
//
select集合，菜单对象
initialize:
function
(arrSelects, arrMenu, options) {
if
(arrSelects.length
<=
0
||
arrMenu.lenght
<=
0
)
return
;
//
菜单对象
var
oThis
=
this
;
this
.Selects
=
[];
//
select集合
this
.Menu
=
arrMenu;
//
菜单对象
this
.SetOptions(options);
this
.Default
=
this
.options.Default
||
[];
this
.ShowEmpty
=
!!
this
.options.ShowEmpty;
this
.EmptyText
=
this
.options.EmptyText.toString();
//
设置Selects集合和change事件
Each(arrSelects,
function
(o, i){ addEventHandler((oThis.Selects[i]
=
$(o)),
"
change
"
,
function
(){ oThis.Set(i); }); });
this
.ReSet(); },
//
设置默认属性
SetOptions:
function
(options) {
this
.options
=
{
//
默认值
Default: [],
//
默认值(按顺序)
ShowEmpty:
false
,
//
是否显示空值(位于第一个)
EmptyText:
"
请选择
"
//
空值显示文本(ShowEmpty为true时有效)
}; Object.extend(
this
.options, options
||
{}); },
//
初始化select
ReSet:
function
() {
this
.SetSelect(
this
.Selects[
0
],
this
.Menu,
this
.Default.shift());
this
.Set(
0
); },
//
全部select设置
Set:
function
(index) {
var
menu
=
this
.Menu
//
第一个select不需要处理所以从1开始
for
(
var
i
=
1
, len
=
this
.Selects.length; i
<
len; i
++
){
if
(menu.length
>
0
){
//
获取菜单
var
value
=
this
.Selects[i
-
1
].value;
if
(value
!=
""
){ Each(menu,
function
(o){
if
(o.val
==
value){ menu
=
o.menu
||
[]; } }); }
else
{ menu
=
[]; }
//
设置菜单
if
(i
>
index){
this
.SetSelect(
this
.Selects[i], menu,
this
.Default.shift()); } }
else
{
//
没有数据
this
.SetSelect(
this
.Selects[i], [],
""
); } }
//
清空默认值
this
.Default.length
=
0
; },
//
select设置
SetSelect:
function
(oSel, menu, value) { oSel.options.length
=
0
; oSel.disabled
=
false
;
if
(
this
.ShowEmpty){ oSel.appendChild(GetOption(
""
,
this
.EmptyText)); }
if
(menu.length
<=
0
){ oSel.disabled
=
true
;
return
; } Each(menu,
function
(o){
var
op
=
GetOption(o.val, o.txt
?
o.txt : o.val); op.selected
=
(value
==
op.value); oSel.appendChild(op); }); },
//
添加菜单
Add:
function
(menu) {
this
.Menu[
this
.Menu.length]
=
menu;
this
.ReSet(); },
//
删除菜单
Delete:
function
(index) {
if
(index
<
0
||
index
>=
this
.Menu.length)
return
;
for
(
var
i
=
index, len
=
this
.Menu.length
-
1
; i
<
len; i
++
){
this
.Menu[i]
=
this
.Menu[i
+
1
]; }
this
.Menu.pop()
this
.ReSet(); } }; window.onload
=
function
(){
var
menu
=
[ {
'
val
'
:
'
1
'
,
'
txt
'
:
'
value
'
}, {
'
val
'
:
'
2 ->
'
,
'
menu
'
: [ {
'
val
'
:
'
2_1
'
}, {
'
val
'
:
'
2_2
'
} ]}, {
'
val
'
:
'
3 ->
'
,
'
menu
'
: [ {
'
val
'
:
'
3_1 ->
'
,
'
menu
'
: [ {
'
val
'
:
'
3_1_1
'
}, {
'
val
'
:
'
3_1_2
'
} ]}, {
'
val
'
:
'
3_2
'
} ]}, {
'
val
'
:
'
4 ->
'
,
'
menu
'
: [ {
'
val
'
:
'
4_1 ->
'
,
'
menu
'
: [ {
'
val
'
:
'
4_1_1 ->
'
,
'
menu
'
: [ {
'
val
'
:
'
4_1_1_1
'
} ]} ]} ]} ];
var
sel
=
[
"
sel1
"
,
"
sel2
"
,
"
sel3
"
,
"
sel4
"
,
"
sel5
"
];
var
val
=
[
"
3 ->
"
,
"
3_1 ->
"
,
"
3_1_2
"
];
var
cs
=
new
CascadeSelect(sel, menu, { Default: val }); $(
"
btnA
"
).onclick
=
function
(){cs.ShowEmpty
=!
cs.ShowEmpty;} $(
"
btnB
"
).onclick
=
function
(){ cs.Add( {
'
val
'
:
'
5 ->
'
,
'
menu
'
: [ {
'
val
'
:
'
5_1 ->
'
,
'
menu
'
: [ {
'
val
'
:
'
5_1_1 ->
'
,
'
menu
'
: [ {
'
val
'
:
'
5_1_1_1 ->
'
,
'
menu
'
: [ {
'
val
'
:
'
5_1_1_1_1
'
} ]} ]} ]} ]} ) } $(
"
btnC
"
).onclick
=
function
(){ cs.Delete(
3
) } }
</
script
>
<
style
type
="text/css"
>
.sel select
{
width
:
100px
;
}
</
style
>
</
head
>
<
body
>
<
div
class
="sel"
>
<
select
id
="sel1"
></
select
>
<
select
id
="sel2"
></
select
>
<
select
id
="sel3"
></
select
>
<
select
id
="sel4"
></
select
>
<
select
id
="sel5"
></
select
>
</
div
>
<
br
/>
<
div
>
<
input
id
="btnA"
type
="button"
value
="显示/不显示空值"
/>
<
input
id
="btnB"
type
="button"
value
="添加菜单"
/>
<
input
id
="btnC"
type
="button"
value
="减少菜单"
/>
</
div
>
</
body
>
</
html
>
转载于:https://www.cnblogs.com/cloudgamer/archive/2008/06/24/1228736.html
相关资源：数据结构—成绩单生成器
