`
lzth
  • 浏览: 141017 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript实现多级连动

    博客分类:
  • Java
阅读更多
<!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="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> 
      
 
      

 
      <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> 
分享到:
评论

相关推荐

    javascript实现多级联动下拉菜单的方法

    本文实例讲述了javascript实现多级联动下拉菜单的方法。分享给大家供大家参考。具体实现方法如下: 代码如下: [removed] &lt;!– Begin var arrItems1 = new Array(); var arrItemsGrp1 = new Array(); arrItems1[3...

    JavaScript 多级联动select

    ### JavaScript 多级联动 Select 实现详解 在前端开发中,多级联动 Select 是一个常见的需求,尤其是在处理地区选择、分类导航等场景时。本文将深入解析如何利用原生 JavaScript 实现多级联动 Select,包括其核心...

    JavaScript 自定义多级联动下拉菜单

    JavaScript 自定义多级联动下拉菜单

    JavaScript 自定义多级联动浮动菜单

    总结,创建JavaScript自定义多级联动浮动菜单涉及到以下几个关键步骤: 1. 获取和操作DOM元素。 2. 添加事件监听器,响应用户交互。 3. 修改CSS样式以实现显示、隐藏和浮动效果。 4. 维护数据结构,实现菜单的联动。...

    ICallbackEventHandler接口实现多级联动

    在.NET框架中,`ICallbackEventHandler`接口是一个用于实现页面间无刷新通信的重要工具,尤其在构建复杂的Web应用程序时,如多级联动下拉菜单。这种功能可以提高用户体验,因为用户无需等待整个页面重新加载就能看到...

    JS多级联动浮动菜单

    JavaScript(简称JS)是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发,实现客户端的...通过学习和理解这些知识点,你将能够创建自己的JavaScript多级联动浮动菜单,为网站或应用增加互动性和用户体验。

    json实现多级联动

    在本话题中,我们将探讨如何利用JSON来实现多级联动的效果,这是一种常见的前端交互功能,例如在选择省份后自动更新城市选项,或者在选择类别后显示子类别的选项。 多级联动通常涉及到多个下拉框或列表,它们之间...

    三级联动 多级联动 JavaScript

    总结一下,"三级联动 多级联动 JavaScript"是Web开发中的常见功能,它利用JavaScript的事件驱动和DOM操作来实现动态交互。"多级菜单联动.jsp"文件可能是实现这一功能的一个实例,通过解析和理解这个文件,开发者可以...

    jquery实现多级联动菜单

    如果我们要实现多级联动,可以扩展此代码,添加更多的事件监听和条件判断。例如,当选择二级菜单时,可以展示对应的三级菜单: ```javascript $(document).ready(function() { $('#menu &gt; li').click(function() {...

    多级联动

    1. JavaScript:作为前端开发的基础语言,JavaScript常用于实现多级联动的逻辑。通过监听事件,改变DOM元素的状态,从而更新关联的选择项。 2. jQuery:一个广泛使用的JavaScript库,简化了DOM操作和事件处理,使得...

    javascript html js 自定义多级联动下拉菜单,自定义select联动

    总结来说,实现自定义的多级联动下拉菜单涉及HTML布局、JavaScript交互和DOM操作。通过合理地组合这些技术,我们可以创建出功能强大且用户体验优秀的下拉菜单,这在很多Web应用中都是不可或缺的一部分。记得实践是...

    ajax+json实现多级联动菜单

    ### 使用Ajax+JSON实现多级联动菜单的知识点详解 #### 一、背景介绍与概念解析 随着互联网技术的发展,用户对交互式应用的需求日益增长。RIA(Rich Internet Applications)概念的提出更是加速了这一趋势。其中,...

    多级联动菜单 div+css +js

    本项目以“多级联动菜单”为主题,结合了HTML的`div`元素、CSS样式以及JavaScript编程,来实现动态交互效果。下面将详细介绍这个主题中的相关知识点。 一、`div`元素 `div`(division)是HTML中最基本的布局容器,...

    JavaScript 多级联动浮动菜单

    总的来说,理解和实现JavaScript多级联动浮动菜单是一个涉及前端基础技术、交互设计和用户体验的综合练习。通过研究和实践,开发者不仅能提升JavaScript技能,还能更好地理解网页动态效果的实现原理。

    js select多级联动

    在JavaScript编程中,"js ...总的来说,实现js select多级联动涉及HTML、CSS和JavaScript的综合运用,特别是对DOM操作和事件处理的理解。理解这些知识点并灵活应用,可以创建出高效、用户体验良好的多级联动选择功能。

    js多级联动多选checkbox插件

    在JavaScript开发中,多级联动多选checkbox插件是一种常见的交互元素,用于实现层次结构数据的筛选和选择。这类插件通常用在如地区选择、类别分类等场景,用户可以通过逐级选择来过滤出需要的结果。`cascadebox-...

    ajax多级联动菜单

    【Ajax多级联动菜单】是一种常见的前端交互设计,它允许用户在选择某个菜单项时,自动更新下一级菜单的内容,以此类推,实现多级菜单之间的动态关联。这种技术广泛应用于网页表单填写、筛选器等场景,为用户提供更加...

    JavaScript多级联动浮动菜单 第二版.rar

    JavaScript多级联动浮动菜单 第二版,包含仿京东商城商品分类菜单、仿window xp右键菜单、仿淘宝拼音索引菜单,上一个版本基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高。...

    很好用的多级联动

    在提供的文件列表中,`selectArea.html`很可能是实现这个多级联动选择器的HTML页面,它包含了相关的HTML结构和可能的JavaScript绑定事件。HTML文件通常会包含若干个`&lt;select&gt;`元素,每个`&lt;select&gt;`代表一个级别的...

Global site tag (gtag.js) - Google Analytics