<!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. make -C M=

    http://blog.sina.com.cn/s/blog_89fa41ef0100trjr.html Makefile:PWD = $(shell pwd)KERNEL_SRC = /usr/sr ...

  2. 在pycharm中启动Django服务器

    1.要是直接运行manage.py程序的话 会提示一大堆东西,那无非是提示没有传入参数.先打开mange.py,然后再运行,会提示一堆东西,表示没有配置参数.在pycharm右上角点击edit con ...

  3. fastjson使用TypeReference示例

    package junit.test; import java.util.ArrayList; import java.util.HashMap; import java.util.List; imp ...

  4. FastText算法原理解析

    1. 前言 自然语言处理(NLP)是机器学习,人工智能中的一个重要领域.文本表达是 NLP中的基础技术,文本分类则是 NLP 的重要应用.fasttext是facebook开源的一个词向量与文本分类工 ...

  5. 基于jquery hover图片遮罩层滑动

    分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  6. Python的可视化包 – Matplotlib 2D图表(点图和线图,.柱状或饼状类型的图),3D图表(曲面图，散点图和柱状图)

    Python的可视化包 – Matplotlib Matplotlib是Python中最常用的可视化工具之一,可以非常方便地创建海量类型地2D图表和一些基本的3D图表.Matplotlib最早是为了可 ...

  7. linux下修改tomcat使用的jdk版本

    遇到一种情况,就是linux上好像掉文件了,JDK的目录下没有了,具体问题还不清楚,不过要赶紧修复,不能影响其他程序的运行. 结构重新安装了JDK,tomcat还是启动失败,看l启动日志发现没找到还是 ...

  8. [转]基于BootStrap 的城市三级联动

    原文地址:https://blog.csdn.net/peiyuanxin/article/details/51992384 HTML代码部分    <div class="form- ...

  9. php多路复用（多线程）socket相关应用

    最近研究php多线程的问题,发现中文资源少的可怜,仅有的几篇文章被转了又转,但文中内容价值有限.搜索过程中发现国外很多网站引用的一篇文章写的不错,所以翻译过来. 版权声明:可以任意转载,转载时请务必以 ...

  10. C语言 · 01背包

    最近老碰到DP问题,没整过,在网上有不少资料,转载此篇自:http://blog.csdn.net/libin56842/article/details/9338841 有N件物品和一个容量为V的背包 ...