<!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 四级联动的更多相关文章

  1. jq完成省市区街道四级联动

    之前看的省市区街道四级联动的插件,感觉和公司要求的有些不符合,就自己写了一个 因为要读取本地json文件,所以要跑下服务器 下载browser-sync 然后在项目目录下运行browser-sync ...

  2. [js开源组件开发]js手机联动选择地区仿ios 开源git

    js手机联动选择地区 前言:由于网上找到了一个mobiscrool,比较全,但是不开源,只能试用15天,正式版竟然要三千块钱,穷人只能自己动手,写了个只针对弹窗地区选择的. 本站点所有的资源均在git ...

  3. [js开源组件开发]js手机联动选择日期 开源git

    js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...

  4. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  5. C# 使用winForm的TreeView显示中国城镇四级联动

    直接上代码吧,这里 MySql.Data.MySqlClient;需要到mysql官网下载mysql-connector-net-6.9.8-noinstall.zip   访问密码 6073 usi ...

  6. JS省市区联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...

  7. js 多级联动（省、市、区）

      js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...

  8. 省市区js三级联动（原创）

    看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...

  9. discuz 自带的地区四级联动调用方法

    首先,DZ提供了专门处理地区信息的函数,在source/function/function_profile.php(第14行)文件中:function profile_setting(){}那么,我们 ...

随机推荐

  1. package.json中配置浏览器

    "browserlist":[ ">=1%", "last 2 versions" ],

  2. 使用jquery提交FormData数据

    https://blog.csdn.net/u011500781/article/details/54931716 http://yunzhu.iteye.com/blog/2177923 ***** ...

  3. MySQL索引的维护与优化——查找重复及冗余索引

    方法一:通过MySQL的information_schema数据库 查找重复与冗余索引 SELECT a.table_schema AS '数据库', a.table_name AS '表名', a. ...

  4. ctrl+z的ascii码是多少？

    今天在使用中移动的模组的时候,发现: 突然把我难住了,ctrl+z要在我的数据包中通过TCP/IP发送,而结束字符肯定是需要我自己加在数据包的末尾的. 故,做如下测试: #include <st ...

  5. Android开发（七）——判断网络状态

    项目中难免会出现使用网络的情况,使用网络前得进行网络判断,看网上的网友一般有多种实现版本. 第一种: // 是否有网络连接 public static boolean isNetworkConnect ...

  6. JavaScript高级 面向对象（12）--引用类型值类型作为参数传递的特性

    说明(2017-4-2 18:27:11): 1. 作为函数的参数,就是将函数的数据拷贝一份,传递给函数的定义中的参数. 函数foo()在调用的时候,做了两件事: (1)函数在调用的时候,首先需要将参 ...

  7. [转]启动Tomcat提示：指定的服务未安装

    原文地址:http://blog.csdn.net/yilip/article/details/8066246 新下载的Tomcat7.0 解压缩完了运行tomcat7.exe屏幕一闪就没了 运行to ...

  8. centos 7 64安装mongodb

    官网连接地址:https://www.mongodb.com/download-center?jmp=nav#community 列表中没有CentOS!!我选的是这个Linux 64-bit leg ...

  9. [Selenium.2.Testing.Tools.Beginners.Guide]读书笔记

    Assert, this allows the test to check if the element is on the page, if it is not available then the ...

  10. [开发笔记]-C#判断文件类型

    判断文件真实的类型,不是通过扩展名来判断: /// <summary> /// 判断文件格式 /// http://www.cnblogs.com/babycool /// </su ...