DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS簡單實現多級Select聯動菜單效果代碼
JS簡單實現多級Select聯動菜單效果代碼
編輯:關於JavaScript     

本文實例講述了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程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved