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 (