Js 两级联动和三级联动

最新推荐文章于 2021-05-04 11:47:08 发布

BlueSuperMan

最新推荐文章于 2021-05-04 11:47:08 发布

阅读量2.7k

点赞数 1

分类专栏： javascript 文章标签： function null javascript html

本文链接：https://blog.csdn.net/BlueSuperMan/article/details/2002981

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html:

</body>
</html>

window.onload = function(){

        var sm1 = new SelMenu(true);
        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");

}

</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);

//};

}

} ;

BlueSuperMan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Js 两级联动和三级联动

html: 南京北京鼓樓玄武城北城南鼓樓一鼓樓二玄武一玄武二城北一城北二城南一城南二南京北京
复制链接

扫一扫

专栏目录

Js 两级联动和三级联动

“相关推荐”对你有帮助么？