html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<select name="_selCITY_ID1" id="_selCITY_ID1">
<option value=""></option>
<option value="1">南京</option>
<option value="2">北京</option>
</select>
<select name="_selAREA_ID1" id="_selAREA_ID1">
<option value=""></option>
<option value="1,3">鼓樓</option>
<option value="1,4">玄武</option>
<option value="2,5">城北</option>
<option value="2,6">城南</option>
</select>
<select name="_selADDR_ID1" id="_selADDR_ID1">
<option value=""></option>
<option value="1,3,7">鼓樓一</option>
<option value="1,3,8">鼓樓二</option>
<option value="1,4,9">玄武一</option>
<option value="1,4,10">玄武二</option>
<option value="2,5,11">城北一</option>
<option value="2,5,12">城北二</option>
<option value="2,6,13">城南一</option>
<option value="2,6,14">城南二</option>
</select>
<option value=""></option>
<option value="1">南京</option>
<option value="2">北京</option>
</select>
<select name="_selAREA_ID1" id="_selAREA_ID1">
<option value=""></option>
<option value="1,3">鼓樓</option>
<option value="1,4">玄武</option>
<option value="2,5">城北</option>
<option value="2,6">城南</option>
</select>
<select name="_selADDR_ID1" id="_selADDR_ID1">
<option value=""></option>
<option value="1,3,7">鼓樓一</option>
<option value="1,3,8">鼓樓二</option>
<option value="1,4,9">玄武一</option>
<option value="1,4,10">玄武二</option>
<option value="2,5,11">城北一</option>
<option value="2,5,12">城北二</option>
<option value="2,6,13">城南一</option>
<option value="2,6,14">城南二</option>
</select>
<br>
<select name="_selCITY_ID2" id="_selCITY_ID2">
<option value=""></option>
<option value="1" selected>南京</option>
<option value="2" >北京</option>
</select>
<select name="_selAREA_ID2" id="_selAREA_ID2">
<option value=""></option>
<option value="1,3">鼓樓</option>
<option value="1,4" selected>玄武</option>
<option value="2,5">城北</option>
<option value="2,6" >城南</option>
</select>
<select name="_selCITY_ID2" id="_selCITY_ID2">
<option value=""></option>
<option value="1" selected>南京</option>
<option value="2" >北京</option>
</select>
<select name="_selAREA_ID2" id="_selAREA_ID2">
<option value=""></option>
<option value="1,3">鼓樓</option>
<option value="1,4" selected>玄武</option>
<option value="2,5">城北</option>
<option value="2,6" >城南</option>
</select>
</body>
</html>
</html>
<script>
window.onload = function(){
var sm1 = new SelMenu(true);
sm1.initTitle("請選擇","請選擇","請選擇");
sm1.init("_selCITY_ID1","_selAREA_ID1","_selADDR_ID1");
sm1.initTitle("請選擇","請選擇","請選擇");
sm1.init("_selCITY_ID1","_selAREA_ID1","_selADDR_ID1");
var sm2 = new SelMenu(false);
sm2.initTitle("請選擇1","請選擇1");
sm2.init("_selCITY_ID2","_selAREA_ID2");
sm2.initTitle("請選擇1","請選擇1");
sm2.init("_selCITY_ID2","_selAREA_ID2");
}
</script>
js:
/*
| Subject: JavaScript
二级
,
三级联动菜单
|
| Version: 1.2 |
| Author:
朝阳
|
| Created: 2007-12-19 |
| LastModified: 2007-12-27
| 2007-12-21 1.
第一个选单被选择
,
第二个选单没有被选择
,
第二个选单在画面刷新后会丢失问题
,
修改如下
:
|
如果第一个选单被选择
,
那么将第二个选单的第一个参数设置为第一个选单
,
这样第二个选单无论有值与否都不会出问题
| 2007-12-27 1.
增加如果子菜单没有对应父菜单会出错
| 2007-12-27 2.
增加如果父菜单没有对应子菜单则增加请选择等
.
*/
//=======================================================================================
/*
*
定义
selectObject
对象容器
*param:sSelObj1Value selectObject
的值
*param:sSelObj1Name selectObject
的显示名称
*/
function
SelOjb(sSelObj1Value, sSelObj1Name)
{
this
.value = sSelObj1Value;
this
.text = sSelObj1Name;
this
.arrayList =
new
Array();
//
下级
selectObject
对象
,
保存的是
SelOjb
对象
}
/*
*
用于获取第二级和第三级下拉选单的对象
*param:iSelObj1Value
第一级
selectObject
的值
*param:iSelObj2Value
第二级
selectObject
的值
*/
SelMenu.prototype.getSelObj =
function
(iSelObj1Value, iSelObj2Value)
{
for
(
var
i = 0; i <
this
.selectArray.length; i++)
{
var
selOjb =
this
.selectArray[i];
if
(iSelObj1Value == selOjb.value)
{
if
(iSelObj2Value ==
""
)
{
return
selOjb;
}
//
如果
iSelObj2Value
为空则取的第一级物件
var
selObjList = selOjb.arrayList;
for
(
var
j = 0; j < selObjList.length; j++)
{
var
selOjb1 = selObjList[j];
if
(iSelObj2Value == selOjb1.value)
{
return
selOjb1;
//
如果
iSelObj2Value
为空则取的第二级对象
}
}
}
}
}
;
/*
*
联动选单对象
*param:iLevelStatus
层级状态
true =
三级
, false =
两级
*/
function
SelMenu(iLevelStatus)
{
//
定义两级还是三级
this
.level = iLevelStatus;
//
定义三级下拉选单第一个值,可以使用
initTitle
方法替换
this
.selectTitle = [
"---
请选择
1---"
,
"---
请选择
2---"
,
"---
请选择
3---"
];
//
用于保存
SelOjb
对象的容器
this
.selectArray =
new
Array();
//
设置下拉选单对象的
ID
this
.selectObjID =
new
Array();
}
/*
*
用于设置三级下拉选单第一个值
*param:_sel1Title
第一级下拉选单第一个值
*param:_sel2Title
第二级下拉选单第一个值
*param:_sel3Title
第三级下拉选单第一个值
*/
SelMenu.prototype.initTitle =
function
(_sel1Title, _sel2Title, _sel3Title)
{
if
(_sel1Title !=
""
)
{
this
.selectTitle[0] = _sel1Title;
}
if
(_sel2Title !=
""
)
{
this
.selectTitle[1] = _sel2Title;
}
if
(_sel3Title !=
""
)
{
this
.selectTitle[2] = _sel3Title;
}
}
;
/*
*
用于设置三级下拉选单
ID
*param:_sel1Title
第一级下拉选单
ID
*param:_sel2Title
第二级下拉选单
ID
*param:_sel3Title
第三级下拉选单
ID
*/
SelMenu.prototype.init =
function
(_sel1ID, _sel2ID, _sel3ID)
{
var
_sel1 = document.getElementById(_sel1ID);
var
_sel2 = document.getElementById(_sel2ID);
var
_sel3 = document.getElementById(_sel3ID);
//
如果传入
ID
有一个无效则不继续执行并提示!
if
(
this
.level)
{
if
(_sel1 ==
null
|| _sel2 ==
null
|| _sel3 ==
null
)
{
alert(
"
你确定你所传入的
ID
有效吗?
/n
请检查!
"
);
return
;
} else {
if
(_sel1 ==
null
|| _sel2 ==
null
)
{
alert(
"
你确定你所传入的
ID
有效吗?
/n
请检查!
"
);
return
;
}
}
}
//
将下拉选单的
ID
复制给数组备用
this
.selectObjID[0] = _sel1;
this
.selectObjID[1] = _sel2;
this
.selectObjID[2] = _sel3;
//
执行初始化方法
this
.initData();
}
;
/*
*
初始化下拉选单
*/
SelMenu.prototype.initData =
function
()
{
//
取得下拉对象
var
_sel1, _sel2, _sel3, _sel1Value, _sel2Value, _sel3Value;
_sel1 =
this
.selectObjID[0];
_sel2 =
this
.selectObjID[1];
if
(
this
.level)
{
_sel3 =
this
.selectObjID[2];
}
//
取得值
_sel1Value = (_sel1.value).split(
","
);
//
只会有一笔
[
第一选单值
]
_sel2Value = (_sel2.value).split(
","
);
//
只会有两笔
[
第一选单值
,
第二选单值
]
if
(
this
.level)
{
_sel3Value = (_sel3.value).split(
","
);
}
//
只会有三笔
[
第一选单值
,
第二选单值
,
第三选单值
]
var
selOjb =
null
;
var
selPOjb =
null
;
var
_selectValue =
null
;
var
iii = 0;
for
(
var
i = 0; i < _sel1.options.length; i++)
{
//
将预定的请选择删除
if
(_sel1.options [i].value!=
null
&&_sel1.options [i].value!=
''
)
{
var
selOjb =
new
SelOjb(_sel1.options[i].value, _sel1.options[i].text);
this
.selectArray[iii++] = selOjb;
}
}
for
(
var
i = 0; i < _sel2.options.length; i++)
{
if
(_sel2.options [i].value!=
null
&&_sel2.options [i].value!=
''
)
{
_selectValue = _sel2.options[i].value.split(
","
);
selOjb =
new
SelOjb(_selectValue[1], _sel2.options[i].text);
//
获取相同键值的父对象
,_selectValue[0]
根据规则是父对象的值
selPOjb =
this
.getSelObj(_selectValue[0],
""
);
//
如果可以找到对应的父对象
if
(selPOjb != undefined)
{
// add 2007/12/27
增加
//
给父对象中的容器
(
子对象的容器
)
设置当前子对象的值
selPOjb.arrayList.push(selOjb);
}
}
}
if
(
this
.level)
{
for
(
var
i = 0; i < _sel3.options.length; i++)
{
if
(_sel3.options [i].value!=
null
&&_sel3.options [i].value!=
''
)
{
_selectValue = _sel3.options[i].value.split(
","
);
selOjb =
new
SelOjb(_selectValue[2], _sel3.options[i].text);
selPOjb =
this
.getSelObj(_selectValue[0], _selectValue[1]);
//
如果可以找到对应的父对象
if
(selPOjb != undefined)
{
// add 2007/12/27
增加
//
给父对象中的容器
(
子对象的容器
)
设置当前子对象的值
selPOjb.arrayList.push(selOjb);
}
}
}
}
//
将当前下拉选单全部清空
_sel1.options.length = 0;
_sel2.options.length = 0;
if
(
this
.level)
{
_sel3.options.length = 0;
}
//
设置下拉选单数据和
onchange
方法
this
.selectOnChange(_sel1Value[0],
""
, 0);
//
如果第一个选单被选择
,
第二个选单没有被选择
,
第二个选单在画面刷新后会丢失
,
故加上下面的
,
//
如果第一个选单被选择
,
那么将第二个选单的第一个参数设置为第一个选单
,
这样第二个选单无论有值与否都不会出问题
_sel2Value[0]=_sel1Value[0];
//add dt:2007/12/21
this
.selectOnChange(_sel2Value[0], _sel2Value[1], 1);
if
(
this
.level)
{
//
描述参看上面的定义
_sel3Value[0]=_sel2Value[0];
//
第一级选单值
//add dt:2007/12/21
_sel3Value[1]=_sel2Value[1];
//
第二季选单值
//add dt:2007/12/21
this
.selectOnChange(_sel3Value[0], _sel3Value[1], 2);
}
//
设置下拉选单选择状态
this
.setSelectOptionStatus(_sel1, _sel1Value[0]);
this
.setSelectOptionStatus(_sel2, _sel2Value[1]);
if
(
this
.level)
{
this
.setSelectOptionStatus(_sel3, _sel3Value[2]);
}
}
;
/*
*
用于设置下拉对象选择值
*param:_selObject
下拉选单对象
*param:_selValue
被选择的值
*/
SelMenu.prototype.setSelectOptionStatus =
function
(_selObject, _selValue)
{
for
(
var
i = 0; i < _selObject.options.length; i++)
{
if
(_selObject.options[i].value == _selValue)
{
_selObject.options[i].selected =
true
;
}
}
}
;
/*
*
设置下拉选单数据和
onchange
方法
*param:iSelObj1Value
第一级下拉选单当前值
*param:iSelObj2Value
第二级下拉选单当前值
*param:sWitchSelect
那个下拉选单初始化数据
0:
第一个选单
1:
第二个选单
2:
第三个选单
*/
SelMenu.prototype.selectOnChange =
function
(iSelObj1Value, iSelObj2Value, sWitchSelect)
{
//
取得下拉对象
var
_sel1 =
this
.selectObjID[0];
var
_sel2 =
this
.selectObjID[1];
var
_sel3 =
this
.selectObjID[2];
//
如果是第一个下拉选单则初始化它
if
(sWitchSelect == 0)
{
if
(
this
.selectArray.length==0)_sel1.options.add(
new
Option(
this
.selectTitle[0],
""
));
//add 2007/12/21
for
(
var
i = 0; i <
this
.selectArray.length; i++)
{
var
_selObj1 =
this
.selectArray[i];
//
当
i=0
时增加
"
请选择
"
if
(i == 0)
{
_sel1.options.add(
new
Option(
this
.selectTitle[0],
""
));
}
//
主类请选择
//
给第一个下拉选单增加
Option
_sel1.options.add(
new
Option(_selObj1.text, _selObj1.value));
//
注册
onchange
事件
var
_this =
this
;
_sel1.onchange =
function
()
{
_this.selectOnChange(
this
.value,
""
, 1);
}
;
}
}
//
如果选择第一个选单
,
只生成下拉选单后选择第一个下拉选单执行
if
(sWitchSelect == 1)
{
_sel2.options.length = 0;
//
第二个选单先清空
if
(
this
.level)
{
_sel3.options.length = 0;
}
//
第三个选单先清空
//
取得第一个下拉选单容器对象
var
_selObj1 =
this
.getSelObj(iSelObj1Value,
""
);
//
将第三个选单设置默认一个请选择
if
(
this
.level)
{
_sel3.options.add(
new
Option(
this
.selectTitle[2],
""
));
}
//
细类请选择
//
如果
_selObj1
没有值表示没有第二个选单
,
将第二个选单设置一个请选择
if
(_selObj1 == undefined)
{
_sel2.options.add(
new
Option(
this
.selectTitle[1],
""
));
//
次类请选择
return
;
}else{
if
(_selObj1.arrayList.length==0)
// add 2007/12/27
如果第二个选单没有值则增加请选择
_sel2.options.add(
new
Option(
this
.selectTitle[1],
""
));
//
次类请选择
}
//
设置第二个选单
for
(
var
i = 0; i < _selObj1.arrayList.length; i++)
{
var
_selObj2 = _selObj1.arrayList[i];
//
设置第二个选单第一个值为请选择
if
(i == 0)
{
_sel2.options.add(
new
Option(
this
.selectTitle[1],
""
));
}
//
次类请选择
//
初始化第二个下拉选单并设置相关
onchange
_sel2.options.add(
new
Option(_selObj2.text, _selObj2.value));
//
重要
,
将当前对象
(SelMenu)this
给变量
_this,
以便在
onchange
使用
_this
调用调用当前对象
,
因为
//
在
_sel2.onchange = function()
的
this
表示的是
_sel2
对象
,
而这个对象没有
selectOnChange
方法
var
_this =
this
;
_sel2.onchange =
function
()
{
if
(_this.level)
{
_this.selectOnChange(iSelObj1Value,
this
.value, 2);
}
}
;
}
}
//
设置第三个选单
if
(sWitchSelect == 2)
{
_sel3.options.length = 0;
//
如果第二个选单没有值则将第三个选单设置请选择
if
(iSelObj2Value ==
""
)
{
_sel3.options.add(
new
Option(
this
.selectTitle[2],
""
));
//
细类请选择
return
;
}
//
获取第三个下拉对象的容器对象
(
第二个对象
)
var
_selObj2 =
this
.getSelObj(iSelObj1Value, iSelObj2Value);
//
如果没有找到则表示没有第三个下拉对象容器则设置为请选择
if
(_selObj2 == undefined)
{
_sel3.options.add(
new
Option(
this
.selectTitle[2],
""
));
//
细类请选择
return
;
}else{
if
(_selObj2.arrayList.length==0)
// add 2007/12/27
如果第三个选单没有值则增加请选择
_sel3.options.add(
new
Option(
this
.selectTitle[2],
""
));
//
细类请选择
}
//
设置第三个下拉选单
for
(
var
i = 0; i < _selObj2.arrayList.length; i++)
{
var
_selObj3 = _selObj2.arrayList[i];
if
(i == 0)
{
_sel3.options.add(
new
Option(
this
.selectTitle[2],
""
));
}
//
细类请选择
_sel3.options.add(
new
Option(_selObj3.text, _selObj3.value));
//
重要
,
将当前对象
(SelMenu)this
给变量
_this,
以便在
onchange
使用
_this
调用调用当前对象
,
因为
//
在
_sel3.onchange = function()
的
this
表示的是
_sel3
对象
,
而这个对象没有
selectOnChange
方法
var
_this =
this
;
//_sel3.onchange = function () {
//_this.selectOnChange(iSelObj1Value, this.value, 3);
//};
}
}
}
;