<!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. Android 实用代码七段（一）

    前言 这里积累了一些不常见确又很实用的代码,每收集7条更新一次,希望能对大家有用. 声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: htt ...

  2. 洛谷P1189 逃跑的拉尔夫(SEARCH)

    洛谷1189 SEARCH 题目描述 年轻的拉尔夫开玩笑地从一个小镇上偷走了一辆车,但他没想到的是那辆车属于警察局,并且车上装有用于发射车子移动路线的装置. 那个装置太旧了,以至于只能发射关于那辆车的 ...

  3. Storm系列(五)架构分析之Nimbus启动过程

    启动流程图   mk-assignments 功能:对当前集群中所有Topology进行新一轮的任务调度. 实现源码路径: \apache-storm-0.9.4\storm-core\src\clj ...

  4. cocos2d-x 从onEnter、onExit、 引用计数 谈内存泄露问题

    /////////////////////////////////// //author : zhxfl //date   : 2013.8.29 //email  : 291221622@qq.co ...

  5. 杭电HDOJ--ACM1002（JAVA解题，运用BigInteger）（自定义MBigInteger 简单实现大数处理----完善后可以实现百亿计算器）

    转载声明:原文转自http://www.cnblogs.com/xiezie/p/5501901.html     JAVA解题:   import java.util.*; import java. ...

  6. puppet重申证书

    直接上步骤,由于测试用的是PE3.X版本,在网上搜的命令几乎与PE相关的puppet命令不同了, 1.在PE-Client操作,停止pe-puppet,pe-mcollective资源; puppet ...

  7. nginx 多域名配置 （nginx如何绑定多个域名）

         nginx绑定多个域名可又把多个域名规则写一个配置文件里,也可又分别建立多个域名配置文件,我一般为了管理方便,每个域名建一个文件,有些同类域名也可又写在一个总的配置文件里. 一.每个域名一个 ...

  8. 问题-Delphi记忆工程打开的单元(XE2设置项)

    问题情况:每次在delphi中打开了N个单元的窗口,关闭delphi后,第二天还得一个一个打开单元窗口.问题原因:这是因为delphi的记忆功能未打开.问题处理:Tools->Options.. ...

  9. Ubuntu下为 Flash插件方法

    1.下载flash插件,地址:http://get.adobe.com/cn/flashplayer/ 下载tar格式的install_flash_player_11_linux_x86_64.tar ...

  10. JAVA_3lesson

    程序设计守则 为了增加程序的可扩展性,维护性.可以采用interface, abstract   可以抽象出来:共同的方法,属性   开发系统时,主体构架使用接口,接口构成了系统的骨架.   要遵循开 ...