日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
解析JS實現(xiàn)無刷新聯(lián)動菜單技巧

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

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

JS實現(xiàn)無刷新聯(lián)動菜單（select）的方法

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

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

聯(lián)動菜單的實現(xiàn)方法：

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

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

Code:

 
 
 
      
  
  
  1. 　　varnewOption=newOption(optionText,optionvalue);  
    2.   
  
  
  2.  
    3.

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

為了保持一致，我們確定選項的格式為：

Code:

 
 
 
      
  
  
  1. 　　{txt:"選項名",val:"選項值"}  
    2.   
  
  
  2.  
    3.

那么一個選項組則是：

Code:

 
 
 
      
  
  
  1. varchildArr=[];  
    2.   
  
  
  2. childArr['父選項值1']=[  
    3.   
  
  
  3. 　　{txt:"選項名1",val:"選項值1"},  
    4.   
  
  
  4. 　　{txt:"選項名2",val:"選項值2"},  
    5.   
  
  
  5. 　　{txt:"選項名3",val:"選項值3"},  
    6.   
  
  
  6. 　　...  
    7.   
  
  
  7. 　　{txt:"選項名n",val:"選項值n"}  
    8.   
  
  
  8. ]  
    9.   
  
  
  9. childArr['父選項值2']=[  
    10.   
  
  
  10. 　　{txt:"選項名1",val:"選項值1"},  
    11.   
  
  
  11. 　　{txt:"選項名2",val:"選項值2"},  
    12.   
  
  
  12. 　　{txt:"選項名3",val:"選項值3"},  
    13.   
  
  
  13. 　　...  
    14.   
  
  
  14. 　　{txt:"選項名n",val:"選項值n"}  
    15.   
  
  
  15. ]  
    16.   
  
  
  16.  
    17.

 其中“父選項值”是父下拉列表選中的值。

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

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

Code:

 
 
 
      
  
  
  1. for(vari=0;i  
  
  
  2. {  
    3.   
  
  
  3. 　　selectObj.options[i]=newOption(optionList[i].txt,optionList[i].val);  
    4.   
  
  
  4. }  
    5.   
  
  
  5.  
    6.

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

Code:

 
 
 
      
  
  
  1. functionremoveOptions(selectObj)  
    2.   
  
  
  2. {  
    3.   
  
  
  3. 　　if(typeofselectObj!='object')  
    4.   
  
  
  4. 　　{  
    5.   
  
  
  5. 　　　　selectObj=document.getElementById(selectObj);  
    6.   
  
  
  6. 　　}  
    7.   
  
  
  7. 　　//原有選項計數(shù)  
    8.   
  
  
  8. 　　varlen=selectObj.options.length;  
    9.   
  
  
  9. 　　for(vari=0;i  
  
  
  10. 　　{  
    11.   
  
  
  11. 　　　　//移除當(dāng)前選項  
    12.   
  
  
  12. 　　　　selectObj.options[0]=null;  
    13.   
  
  
  13. 　　}  
    14.   
  
  
  14. }  
    15.   
  
  
  15.  
    16.

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

4.設(shè)置一個提示選擇項和默認選擇項：

通常我們在下拉列表中會設(shè)置一個提示選擇項，如：“請選擇城市”，這個選項值為空，作用只是提示用戶執(zhí)行選擇操作。

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

完整代碼如下：

Javascript:

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.  
    3.

 #p#示例代碼：

HTML:

 
 
 
      
  
  
  1. 　  
    2.   
  
  
  2.   
  
  
  3. onchange="if(this.value!='')  
    4.   
  
  
  4. setCity(this.options[this.selectedIndex].value);">　　  
    5.   
  
  
  5. -請選擇-　　  
    6.   
  
  
  6. 江蘇省　　  
    7.   
  
  
  7. 浙江省 
    8.   
  
  
  8.  
    9.   
  
  
  9. 省　  
    10.   
  
  
  10. 　　  
    11.   
  
  
  11. -請選擇- 
    12.   
  
  
  12.  
    13.   
  
  
  13. 市  
    14.   
  
  
  14.  
    15.

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

【編輯推薦】

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

當(dāng)前名稱：解析JS實現(xiàn)無刷新聯(lián)動菜單技巧
當(dāng)前URL：http://www.5511xx.com/article/djceidg.html