<!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. (转)Making 1 million requests with python-aiohttp

    转自:https://pawelmhm.github.io/asyncio/python/aiohttp/2016/04/22/asyncio-aiohttp.html Making 1 millio ...

  2. hive一行变多行及多行变一行

    hive一行变多行及多行变一行 场景 name alias zhaoqiansun abc def ghi 处理数据时需要将上表处理成为下面的形式: name alias zhaoqiansun ab ...

  3. MSTP故障处理手册

    H3C核心交换机常见故障定位手册.pdf MSTP故障处理手册.pdf 目 录 1 MSTP故障处理 1.1 广播风暴故障处理 1.1.1 故障描述 1.1.2 故障处理流程 1.1.3 故障处理步骤 ...

  4. Sphinx/Coreseek 4.1的安装流程

    yum install mysql-devel libxml2-devel expat-devel cd /data/software/ wget http://www.coreseek.cn/upl ...

  5. WPF中自定义路由事件

    public class MyButtonSimple: Button { // Create a custom routed event by first registering a RoutedE ...

  6. redis主从配置（docker实现）

    一.docker新建两个redis服务端,并分别设置端口为6379和6380 命令如下: docker run -p : -d --name redis-server docker.io/redis: ...

  7. Android——shape和selector和layer-list的（详细说明 转）

    <shape>和<selector>在Android UI设计中经常用到.比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到<shape> ...

  8. Mac下配置Apache Httpd的Https/SSL

    Mac下配置Apache Httpd的Https/SSL httpd版本: httpd-2.4.17 jdk版本: jdk1.8.0_65 参考来源: Mac下安装Apache Httpd Mac O ...

  9. 通过github搭建个人博客

    今天突发奇想,想用GitHub搭建一个个人博客,就大概学习了一下,特此记录. 其实非常简单,首先要知道,这里是通过GitHub Pages进行搭建的,什么?不知道什么是GitHub Pages?Git ...

  10. -Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.

    在执行[maven clean]的时候报错,错误信息如下: -Dmaven.multiModuleProjectDirectory system property is not set. Check ...