JS簡單實作多級Select連動選單效果程式碼_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS簡單實作多級Select連動選單效果程式碼_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:40 PM

jsselect

本文實例講述了JS簡單實作多級Select連動選單效果程式碼。分享給大家供大家參考。具體如下：

JS連動選單，簡單程式碼實現JS多級Select連動選單，也就是大家常用的一款選單，Select連動狀態的選單，網頁上常見到的效果，希望大家能用得上。

運作效果截圖如下：

線上示範網址如下：

http://demo.jb51.net/js/2015/js-simple-select-ld-menu-codes/

具體程式碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS联动下拉框</title>
<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>
  <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>

希望本文所述對大家的JavaScript程式設計有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。