js 四级联动

发布时间:2017-7-1 11:35:12编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"js 四级联动 ",主要涉及到js 四级联动 方面的内容,对于js 四级联动 感兴趣的同学可以参考一下。

js 四级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS联动下拉框</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<script language="javascript">
/*
** ==================================================================================================
** 类名:CLASS_LIANDONG_YAO
** 功能:多级连动菜单
**
** 作者:YAODAYIZI
** ==================================================================================================
**/
function CLASS_LIANDONG_YAO(array) {
//数组,联动的数据源
this.array = array;
this.indexName = '';
this.obj = '';
//设置子SELECT
// 参数:当前onchange的SELECT ID,要设置的SELECT ID
this.subSelectChange = function (selectName1, selectName2) {
//try
//{
var obj1 = document.all[selectName1];
var obj2 = document.all[selectName2];
var objName = this.toString();
var me = this;

obj1.onchange = function () {

me.optionChange(this.options[this.selectedIndex].value, obj2.id)
}
}
//设置第一个SELECT
// 参数:indexName指选中项,selectName指select的ID
this.firstSelectChange = function (indexName, selectName) {
this.obj = document.all[selectName];
this.indexName = indexName;
this.optionChange(this.indexName, this.obj.id)
}

// indexName指选中项,selectName指select的ID
this.optionChange = function (indexName, selectName) {
var obj1 = document.all[selectName];
var me = this;
obj1.length = 0;
obj1.options[0] = new Option("-请选择-", '');
for (var i = 0; i < this.array.length; i++) {

if (this.array[i][1] == indexName) {
//alert(this.array[i][1]+" "+indexName);
obj1.options[obj1.length] = new Option(this.array[i][2], this.array[i][0]);
}
}
}

}
</script>
</head>
<body>

<form name="form1" method="post">

<SELECT ID="x1" NAME="x1">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x2" NAME="x2">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x3" NAME="x3">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x4" NAME="x4">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x5" NAME="x5">
<OPTION selected></OPTION>
</SELECT>

</form>
</body>


<script language="javascript">
//数据源 数据格式 ID,父级ID,显示名称
var array2 = new Array();//数据格式 ID,父级ID,名称
array2[0] = new Array("贵州", "根目录", "贵州");
array2[1] = new Array("贵阳", "贵州", "贵阳");
array2[2] = new Array("遵义", "贵州", "遵义");
array2[3] = new Array("汇川区", "遵义", "汇川区");
array2[4] = new Array("红花岗区", "遵义", "红花岗区");
array2[5] = new Array("上海路", "汇川区", "上海路");
array2[6] = new Array("南京路", "汇川区", "南京路");
array2[7] = new Array("丁字口", "红花岗区", "丁字口");
array2[8] = new Array("遵义会议", "红花岗区", "遵义会议");

//--------------------------------------------
//这是调用代码
//设置数据源
var liandong2 = new CLASS_LIANDONG_YAO(array2);
//设置第一个选择框
liandong2.firstSelectChange("根目录", "x1");
//设置子选择框
liandong2.subSelectChange("x1", "x2")
liandong2.subSelectChange("x2", "x3")
liandong2.subSelectChange("x3", "x4")
liandong2.subSelectChange("x4", "x5")
</script>
</html>



上一篇:js math atan2
下一篇:C# BackgroundWorker 的使用

相关文章

关键词: js 四级联动

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款