<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS联动下拉框</title>
<script language="javascript" >
/* 
**    ====================================
**    类名：CLASS_LIANDONG_YAO 
**    功能：多级连动菜单 
**/   
  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">
   &nbsp;
   <SELECT ID="s1" NAME="s1"  >
    <OPTION selected></OPTION>
   </SELECT>
   <SELECT ID="s2" NAME="s2"  >
    <OPTION selected></OPTION>
   </SELECT>
   <SELECT ID="s3" NAME="s3">
    <OPTION selected></OPTION>
   </SELECT>
   <br>
   <br><br>
   <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">
//例子1-------------------------------------------------------------
//数据源
var array=new Array();
  array[0]=new Array("华南地区","根目录","华南地区"); //数据格式 ID，父级ID，名称
  array[1]=new Array("华北地区","根目录","华北地区");
  array[2]=new Array("上海","华南地区","上海");
  array[3]=new Array("广东","华南地区","广东");
  array[4]=new Array("徐家汇","上海","徐家汇");
  array[5]=new Array("普托","上海","普托"); 
  array[6]=new Array("广州","广东","广州");
  array[7]=new Array("湛江","广东","湛江");
  //--------------------------------------------
  //这是调用代码
  var liandong=new CLASS_LIANDONG_YAO(array) //设置数据源
  liandong.firstSelectChange("根目录","s1"); //设置第一个选择框
  liandong.subSelectChange("s1","s2"); //设置子级选择框
  liandong.subSelectChange("s2","s3");
 
 
 //例子2-------------------------------------------------------------
 //数据源 
  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("不知道","湛江","不知道");
  array2[9]=new Array("5555","湛江","555");
  array2[10]=new Array("++++","不知道","++++");
  array2[11]=new Array("111","徐家汇","111");
  array2[12]=new Array("222","111","222");
  array2[13]=new Array("333","222","333");
  //--------------------------------------------
  //这是调用代码
  //设置数据源
  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>

C# select的联动效果的更多相关文章

  1. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  2. 实现select联动效果，数据从后台获取

    效果如下: 当type值选择完后,amount值会自动相应填入. 1. 从后台获取数据,为一个数组,里面包含多个对象. <select id="scholarshipTypeSelec ...

  3. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  4. JQuery打造下拉框联动效果

    做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后 ...

  5. jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

    一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...

  6. vue实现二级联动效果

    你如城市与省份间的二级联动效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  7. js之省市区(县)三级联动效果

    省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...

  8. JS省市区联动效果

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

  9. 《DWZ笔记一》<select>动态联动菜单

    联动菜单,即组合框Combo box,在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name ...

随机推荐

  1. 使用Arcglobe 10与3dmax建立三维城市

    转自:http://www.cnblogs.com/jinlun/p/3380307.html 随着国家大力推进数字城市的建设,三维城市的建设也是势在必行的.与传统二维地图相比,三维城市在立体层次.视 ...

  2. HDU4725 The Shortest Path in Nya Graph dij

    分析:对于每一层,原来n个点,然后扩展为原来的三倍,每一层扩展一个入点,一个出点,然后跑最短路 注:tmd我把一个n写成m了,然后wa了7次,我都要怀疑人生了 #include<cstdio&g ...

  3. python __enter__ 与 __exit__的作用，以及与 with 语句的关系

    转载自:http://linbo.github.io/2013/01/08/python-with/ (一直不知道博客园哪里发转载文章) With语句是什么? 有一些任务,可能事先需要设置,事后做清理 ...

  4. 现在再开发一个CMS系统还有市场吗？

    现在几个老的开源cms系统phpcms.dedecms  基本都不维护了,大量漏洞没人修补.后台难看无比.有没有必要开发一套新的cms系统.还有这个需求吗?大家说说.

  5. UVA11324 The Largest Clique(DP+缩点)

    题意:给一张有向图G,求一个结点数最大的结点集,使得该结点中任意两个结点 u 和 v满足:要么 u 可以到达 v, 要么 v 可以到达 u(u 和 v 相互可达也可以). 分析:”同一个强连通分量中的 ...

  6. shell脚本应用（2）--变量，数值和字符串

    变量 定义,赋值: var=value 引用 $var,${var} 特殊变量 $?上条命令状态 $*/$@所有参数列表 $#参数个数 $0执行的命令名称 $1/${10}第1/10个参数 数值运算 ...

  7. linux 密码安全脚本

    #!/bin/bash #by:osx1260@.com DIESO=/etc/pam.d PAMSO=$(ls $DIESO/* |awk -F'/' '{print $4}') NEPAMUN=' ...

  8. HDU5366 The mook jong (DP)

    The mook jong 问题描述 ZJiaQ为了强身健体,决定通过木人桩练习武术.ZJiaQ希望把木人桩摆在自家的那个由1*1的地砖铺成的1*n的院子里.由于ZJiaQ是个强迫症,所以他要把一个木 ...

  9. storm核心组件

    Storm核心组件 了解 Storm 的核心组件对于理解 Storm 原理非常重要,下面介绍 Storm 的整体,然后介绍 Storm 的核心. Storm 集群由一个主节点和多个工作节点组成.主节点 ...

  10. 【设计模式】单例设计模式的N中Java实现方法

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17359719 特点 单例模式的特点: 1.只能有一个实例: 2.必须自己创建自己的一个实例 ...