<!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. 【设计模式】装饰器模式与Java Servlet、Spring Session在其中的使用

    简述 装饰器模式,可以通过装饰器类,通过依赖原实现的方式(不使用继承),达到扩展原实现的目的.UML图如下: ServletRequestWrapper于其中的使用 ServletRequestWra ...

  2. __slots__ Python Class限制添加属性

    正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: class Student(object): pa ...

  3. idea 提示忽略大小写

  4. AAPT err(Facade for): libpng error: Not a PNG file 错误解决

    在导入项目到Android studio后,若编译出现“AAPT err(Facade for): libpng error: Not a PNG file”错误. 该错误表示项目中的drawable ...

  5. 面试问卷-java&Oracle

    东方国信 - 软件开发人员面试问卷(ver1.001.002) 1.    通用编程知识问卷(所有编程人员必做)... 1 1.1      SQL问卷... 1 1.2      翻译... 2 2 ...

  6. 实验吧 web题writeup

    1.http://ctf5.shiyanbar.com/web/wonderkun/web/index.html 用户名我输入:or'xor"and"select"uni ...

  7. 在dos下查看memcache运行状态

    在dos命令行下查看memcache运行状态,操作很简单,只需cmd下输入:telnet IP 端口号->stats  ,如果本机器不支持telnet还需安装,可以百度telnet的安装方法. ...

  8. http连接优化与浏览器允许的并发请求资源数相关资料(整理转载)

    网页性能优化相关资料: https://developer.yahoo.com/performance/rules.html#page-nav 前端技术的逐渐成熟,还衍生了domain hash, c ...

  9. WK2124 驱动移植

    官网: http://www.wkmic.com/News_Show.php?theId=17 驱动首先放在 kernel 3.2.0 driver/spi/ 下面 // 1. 更名为 wk2124A ...

  10. STM32f103的数电采集电路的TIMER定时器的使用与时序控制的程序

    STM32 的通用定时器是一个通过可编程预分频器(PSC)驱动的 16 位自动装载计数器(CNT)构成.STM32 的通用定时器可以被用于:测量输入信号的脉冲长度(输入捕获)或者产生输出波形(输出比较 ...