Javascript 實現無刷新聯動菜單（select）的方法

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

其實，聯動菜單的實現原理非常簡單，本文詳細介紹了聯動菜單的實現方式，知道了原理，我們可以很容易地製作從XML、數據庫加載的無限級聯動菜單。


--------------------------------------------------------------
點此瀏覽示例文件
--------------------------------------------------------------

聯動菜單的實現方法：

 

1.確定數據格式：

首先，我們介紹一下創建 Option 的語法：
Code:

var newOption = new Option(optionText, optionvalue);

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

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

{txt:"選項名", val:"選項值"}

那麼一個選項組則是：
Code:

var childArr = [];

childArr['父選項值1'] = [
    {txt:"選項名1", val:"選項值1"}, 
    {txt:"選項名2", val:"選項值2"},
    {txt:"選項名3", val:"選項值3"},
    ...
    {txt:"選項名n", val:"選項值n"}
]

childArr['父選項值2'] = [
    {txt:"選項名1", val:"選項值1"}, 
    {txt:"選項名2", val:"選項值2"},
    {txt:"選項名3", val:"選項值3"},
    ...
    {txt:"選項名n", val:"選項值n"}
]

 

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

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

2.根據傳入的數組創建選項列表：

Code:

for (var i=0; i < len; i++)
{
    selectObj.options[i] = new Option(optionList[i].txt, optionList[i].val);
}

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

Code:

function removeOptions(selectObj)
{
    if (typeof selectObj != 'object')
    {
        selectObj = document.getElementById(selectObj);
    }

    // 原有選項計數
    var len = selectObj.options.length;

    for (var i=0; i < len; i++)
    {
        // 移除當前選項
        selectObj.options[0] = null;
    }
}

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

4.設置一個提示選擇項和默認選擇項：

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

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

完整代碼如下：

Javascript:

1.  
2. <script language="JavaScript" type="text/javascript">
3. <!--
4.  
5. /*
6. * 說明：將指定下拉列表的選項值清空
7. * 作者：CodeBit.cn ( http://www.CodeBit.cn )
8. *
9. * @param {String || Object]} selectObj 目標下拉選框的名稱或對象，必須
10. */
11. function removeOptions(selectObj)
12. {
13. if (typeof selectObj != 'object')
14. {
15. selectObj = document.getElementById(selectObj);
16. }
17.  
18. // 原有選項計數
19. var len = selectObj.options.length;
20.  
21. for (var i=0; i < len; i++)
22. {
23. // 移除當前選項
24. selectObj.options[0] = null;
25. }
26. }
27.  
28. /*
29. * 說明：設置傳入的選項值到指定的下拉列表中
30. * 作者：CodeBit.cn ( http://www.CodeBit.cn )
31. *
32. * @param {String || Object]} selectObj 目標下拉選框的名稱或對象，必須
33. * @param {Array} optionList 選項值設置 格式：[{txt:'北京', val:'010'}, {txt:'上海', val:'020'}] ，必須
34. * @param {String} firstOption 第一個選項值，如：“請選擇”，可選，值爲空
35. * @param {String} selected 默認選中值，可選
36. */
37. function setSelectOption(selectObj, optionList, firstOption, selected)
38. {
39. if (typeof selectObj != 'object')
40. {
41. selectObj = document.getElementById(selectObj);
42. }
43.  
44. // 清空選項
45. removeOptions(selectObj);
46.  
47. // 選項計數
48. var start = 0;
50. // 如果需要添加第一個選項
51. if (firstOption)
52. {
53. selectObj.options[0] = new Option(firstOption, '');
54.  
55. // 選項計數從 1 開始
56. start ++;
57. }
58.  
59. var len = optionList.length;
60.  
61. for (var i=0; i < len; i++)
62. {
63. // 設置 option
64. selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);
65.  
66. // 選中項
67. if(selected == optionList[i].val)
68. {
69. selectObj.options[start].selected = true;
70. }
71.  
72. // 計數加 1
73. start ++;
74. }
75.  
76. }
77.  
78. //-->
79. </script>
80.  
81.  

示例代碼：
HTML:

1.  
2. <script language="JavaScript" type="text/javascript">
3.  
4. var cityArr = [];
5. cityArr['江蘇省'] = [
6. {txt:'南京', val:'南京'},
7. {txt:'無錫', val:'無錫'},
8. {txt:'徐州', val:'徐州'},
9. {txt:'蘇州', val:'蘇州'},
10. {txt:'南通', val:'南通'},
11. {txt:'淮陰', val:'淮陰'},
12. {txt:'揚州', val:'揚州'},
13. {txt:'鎮江', val:'鎮江'},
14. {txt:'常州', val:'常州'}
15. ];
16. cityArr['浙江省'] = [
17. {txt:'杭州', val:'杭州'},
18. {txt:'寧波', val:'寧波'},
19. {txt:'溫州', val:'溫州'},
20. {txt:'湖州', val:'湖州'}
21. ];
22.  
23. function setCity(province)
24. {
25. setSelectOption('city', cityArr[province], '-請選擇-');
26. }
27.  
28. </script>
29.  
30. <select name="province" id="province" onchange="if(this.value != '') setCity(this.options[this.selectedIndex].value);">
31. <option value="">-請選擇-</option>
32. <option value="江蘇省">江蘇省</option>
33. <option value="浙江省">浙江省</option>
34. </select> 省
35.  
36. <select name="city" id="city">
37. <option value="">-請選擇-</option>
38. </select> 市
39.  
40.  

根據這個結構，設置好數據，我們可以很容易的實現無限級聯動菜單。或者我們也可以將數據存放在文件或數據庫中，通過 Ajax 獲取數據。