<!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. [HDU 1254] 推箱子

    推箱子 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  2. 【转】增加eclipse的运行内存 -- 不错！！

    原文网址:http://blog.csdn.net/qa962839575/article/details/43605241 今天在eclipse 中测试把文档转换为图片的时候,报出了下面的错误: J ...

  3. javascript点击图片放大的功能（原生）

    使用的图片: 1.jpg <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  4. SQL Server 2008空间数据应用系列一：空间信息基础

    转自:http://www.cnblogs.com/beniao/archive/2011/01/18/1933412.html Microsoft SQL Server 2008 提供了全面性的空间 ...

  5. 谈谈分布式事务之三: System.Transactions事务详解[上篇]

    在.NET 1.x中,我们基本是通过ADO.NET实现对不同数据库访问的事务..NET 2.0为了带来了全新的事务编程模式,由于所有事务组件或者类型均定义在System.Transactions程序集 ...

  6. LINUX系统怎么关闭防火墙?

    所谓防火墙指的是一个由软件和硬件设备组合而成.在内部网和外部网之间.专用网与公共网之间的界面上构造的保护屏障.是一种获取安全性方法的形象说法,它是一种计算机硬件和软件的结合,使Internet与Int ...

  7. Hadoop框架下MapReduce中的map个数如何控制

    控制map个数的核心源码 long minSize = Math.max(getFormatMinSplitSize(), getMinSplitSize(job)); //getFormatMinS ...

  8. PC-如何提高计算机的启动和关机的速度？

    如何提高计算机的启动和关机的速度? 一.bios的优化设置 在bios设置的首页我们进入"advanced bios features"选项,将光标移到"frist bo ...

  9. 教程-Delphi MSComm 实时串口通讯

    Delphi  MSComm 实时串口通讯 MSComm控件具有丰富的与串口通信密切相关的属性,提供了对串口进行的多种操作,进而使串行通信变得十分简便.MSComm的控件属性较多,常用的属性如下:1) ...

  10. JS 创建对象的几种方式

    面向对象就是把属性和操作属性的方法放在一起作为一个相互依存的整体--对象,即拥有类的概念,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性! ECMA-262把对象定义为:"无 ...