有声小说,盛世嫡妃凤轻小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

解析JS實(shí)現(xiàn)無(wú)刷新聯(lián)動(dòng)菜單技巧

本文向大家簡(jiǎn)單介紹一下什么是聯(lián)動(dòng)菜單，以及JS實(shí)現(xiàn)無(wú)刷新聯(lián)動(dòng)菜單（select）的方法，其實(shí)，聯(lián)動(dòng)菜單的實(shí)現(xiàn)原理非常簡(jiǎn)單，本文詳細(xì)介紹了聯(lián)動(dòng)菜單的實(shí)現(xiàn)方式，知道了原理，我們可以很容易地制作從XML、數(shù)據(jù)庫(kù)加載的無(wú)限級(jí)聯(lián)動(dòng)菜單。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、嘉善網(wǎng)站維護(hù)、網(wǎng)站推廣。

JS實(shí)現(xiàn)無(wú)刷新聯(lián)動(dòng)菜單（select）的方法

所謂聯(lián)動(dòng)菜單，就是后一個(gè)下拉框的選項(xiàng)是根據(jù)前一個(gè)下拉框被選中的值來(lái)決定的，一個(gè)典型的應(yīng)用就是省市聯(lián)動(dòng)菜單了，市的下拉選項(xiàng)是根據(jù)你選了哪個(gè)省來(lái)決定的，類似的需求我們經(jīng)常遇到，相信許多新手都被這個(gè)問(wèn)題困擾過(guò)。

其實(shí)，聯(lián)動(dòng)菜單的實(shí)現(xiàn)原理非常簡(jiǎn)單，本文詳細(xì)介紹了聯(lián)動(dòng)菜單的實(shí)現(xiàn)方式，知道了原理，我們可以很容易地制作從XML、數(shù)據(jù)庫(kù)加載的無(wú)限級(jí)聯(lián)動(dòng)菜單。

聯(lián)動(dòng)菜單的實(shí)現(xiàn)方法：

1.確定數(shù)據(jù)格式：

首先，我們介紹一下創(chuàng)建Option的語(yǔ)法：

Code:

 
 
   
  
  　　varnewOption=newOption(optionText,optionvalue);

根據(jù)上面的語(yǔ)法，我們知道select選項(xiàng)分optionText和optionvalue兩個(gè)內(nèi)容，optionText即下拉框中我們看到的選項(xiàng)，而optionvalue則是提交的實(shí)際值。比如一個(gè)選項(xiàng)我們看到的是“北京”，而實(shí)際提交的值是“010”。

為了保持一致，我們確定選項(xiàng)的格式為：

Code:

 
 
   
  
  　　{txt:"選項(xiàng)名",val:"選項(xiàng)值"}

那么一個(gè)選項(xiàng)組則是：

Code:

 
 
   
  
  varchildArr=[];    
  
  childArr['父選項(xiàng)值1']=[    
  
  　　{txt:"選項(xiàng)名1",val:"選項(xiàng)值1"},    
  
  　　{txt:"選項(xiàng)名2",val:"選項(xiàng)值2"},    
  
  　　{txt:"選項(xiàng)名3",val:"選項(xiàng)值3"},    
  
  　　...    
  
  　　{txt:"選項(xiàng)名n",val:"選項(xiàng)值n"}    
  
  ]    
  
  childArr['父選項(xiàng)值2']=[    
  
  　　{txt:"選項(xiàng)名1",val:"選項(xiàng)值1"},    
  
  　　{txt:"選項(xiàng)名2",val:"選項(xiàng)值2"},    
  
  　　{txt:"選項(xiàng)名3",val:"選項(xiàng)值3"},    
  
  　　...    
  
  　　{txt:"選項(xiàng)名n",val:"選項(xiàng)值n"}    
  
  ]

其中“父選項(xiàng)值”是父下拉列表選中的值。

注意：[]和{}中的值是以“,”(逗號(hào))分隔的，但是***一個(gè)值后面不能有“,”(逗號(hào))，否則語(yǔ)法錯(cuò)誤，PHP程序員要特別注意?。?！#p#

2.根據(jù)傳入的數(shù)組創(chuàng)建選項(xiàng)列表：

Code:

 
 
   
  
  for(vari=0;i  
  
  
{    
  
  　　selectObj.options[i]=newOption(optionList[i].txt,optionList[i].val);    
  
  }

3.在設(shè)置選項(xiàng)之前，我們需要先將原有選項(xiàng)清空：

Code:

 
 
   
  
  functionremoveOptions(selectObj)    
  
  {    
  
  　　if(typeofselectObj!='object')    
  
  　　{    
  
  　　　　selectObj=document.getElementById(selectObj);    
  
  　　}    
  
  　　//原有選項(xiàng)計(jì)數(shù)    
  
  　　varlen=selectObj.options.length;    
  
  　　for(vari=0;i  
  
  
　　{    
  
  　　　　//移除當(dāng)前選項(xiàng)    
  
  　　　　selectObj.options[0]=null;    
  
  　　}    
  
  }

　　注意，這里不是用selectObj.options[i]而是用的selectObj.options[0]，由于在options[0]刪除后，后面的選項(xiàng)就會(huì)補(bǔ)上，因此，我們只需要selectObj.options[0]=null。

4.設(shè)置一個(gè)提示選擇項(xiàng)和默認(rèn)選擇項(xiàng)：

通常我們?cè)谙吕斜碇袝?huì)設(shè)置一個(gè)提示選擇項(xiàng)，如：“請(qǐng)選擇城市”，這個(gè)選項(xiàng)值為空，作用只是提示用戶執(zhí)行選擇操作。

另外，下拉列表也需要能夠設(shè)置默認(rèn)選擇項(xiàng)，即在頁(yè)面加載的時(shí)候，設(shè)置選中狀態(tài)的項(xiàng)目。

完整代碼如下：

Javascript:

 
 
   
  
    
  
  
type="text/javascript">

#p#示例代碼：

HTML:

 
 
   
  
    
  
  
type="text/javascript">　    
  
  varcityArr=[];    
  
  cityArr['江蘇省']=[    
  
  {txt:'南京',val:'南京'},    
  
  {txt:'無(wú)錫',val:'無(wú)錫'},　　　　    
  
  {txt:'徐州',val:'徐州'},　　　　    
  
  {txt:'蘇州',val:'蘇州'},　　　　    
  
  {txt:'南通',val:'南通'},　　　　    
  
  {txt:'淮陰',val:'淮陰'},　　　　    
  
  {txt:'揚(yáng)州',val:'揚(yáng)州'},　　　　    
  
  {txt:'鎮(zhèn)江',val:'鎮(zhèn)江'},　　　　    
  
  {txt:'常州',val:'常州'}　　    
  
  ];    
  
  cityArr['浙江省']=[　　　　    
  
  {txt:'杭州',val:'杭州'},　　　　　    
  
  {txt:'寧波',val:'寧波'},　　　　    
  
  {txt:'溫州',val:'溫州'},　　　　    
  
  {txt:'湖州',val:'湖州'}　　    
  
  ];　    
  
  functionsetCity(province){　　　　    
  
  setSelectOption('city',cityArr[province],'-請(qǐng)選擇-');    
  
  }　    
  
  　    
  
    
  
  
onchange="if(this.value!='')    
  
  setCity(this.options[this.selectedIndex].value);">　　    
  
  -請(qǐng)選擇-　　    
  
  江蘇省　　    
  
  浙江省   
  
     
  
  省　    
  
  　　    
  
  -請(qǐng)選擇-   
  
     
  
  市

　　根據(jù)這個(gè)結(jié)構(gòu)，設(shè)置好數(shù)據(jù)，我們可以很容易的實(shí)現(xiàn)無(wú)限級(jí)聯(lián)動(dòng)菜單?；蛘呶覀円部梢詫?shù)據(jù)存放在文件或數(shù)據(jù)庫(kù)中，通過(guò)Ajax獲取數(shù)據(jù)。

【編輯推薦】

JavaScript對(duì)象的定義及創(chuàng)建實(shí)例
常用JavaScript內(nèi)部對(duì)象
JavaScript中圖像處理技巧
JavaScript函數(shù)中arguments對(duì)象
Javascript中CSS屬性float特殊寫(xiě)法

本文題目：解析JS實(shí)現(xiàn)無(wú)刷新聯(lián)動(dòng)菜單技巧
網(wǎng)頁(yè)URL：http://fisionsoft.com.cn/article/djceidg.html

新聞中心

其他資訊