<!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. 显示eclipse中Problem窗口的方法

    https://blog.csdn.net/ningfuxuan/article/details/76395029 ****************************************** ...

  2. 使用httpclient下载 页面、图片

    代码 import java.io.IOException; import java.io.UnsupportedEncodingException; import org.apache.http.c ...

  3. 【转】Mysql千万级数据表结构修改

    当需要对表进行ddl操作如加索引.增删列时,数据量小时直接在线修改表结构影响不大当表达到百万.千万数据就不能直接在线修改表结构 下面是具体的过程:1.备份数据select * from ih_orde ...

  4. python 发送邮件 带附件

    # coding:utf-8 # __author__ = 'Mark sinoberg' # __date__ = '2016/5/26' # __Desc__ = 实现发送带有各种附件类型的邮件 ...

  5. 03-老马jQuery教程-DOM操作

    jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

  6. 2. 决策树（Decision Tree）-ID3、C4.5、CART比较

    1. 决策树(Decision Tree)-决策树原理 2. 决策树(Decision Tree)-ID3.C4.5.CART比较 1. 前言 上文决策树(Decision Tree)1-决策树原理介 ...

  7. C# 执行bat批处理文件

    private void RunBat(string batPath) { Process pro = new Process(); FileInfo file = new FileInfo(batP ...

  8. 'Project Name' was compiled with optimization

    'Project Name' was compiled with optimizationhtml, body {overflow-x: initial !important;}html { font ...

  9. sql临时表，表变量，CTE，游标使用方法

    if OBJECT_ID('groups') is not null drop table groups create table groups ( groupid ), val int null ) ...

  10. JQuery Table 合并单元格-解决Bug版本

    网络中提供的方法是: <script type="text/javascript"> function _w_table_rowspan(_w_table_id, _w ...