動態生成select三級聯動選單程式碼例項
分享一段程式碼例項,它實現了動態生成select三級聯動選單的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <select id="One" title=""></select> <select id="Two" title=""></select> <select id="Three" title=""></select> <script> var oneSel = document.getElementById("One"); var twoSel = document.getElementById('Two'); var threeSel = document.getElementById('Three'); oneSel.onchange = function () { changeTwoSel() } twoSel.onchange = function () { changeThreeSel() } var oneArray = ['請選擇', '1', '2', '3', '4', '5']; var twoArray = [ ['請選擇'], ['1.1', '1.2', '1.3'], ['2.1', '2.2', '2.3'], ['3.1', '3.2', '3.3'], ['4.1', '4.2', '4.3'], ['5.1', '5.2', '5.3'] ]; var threeArray = [ [ ['請選擇'] ], [ ['1.1.1', '1.1.2', '1.1.3'], ['1.2.1', '1.2.2', '1.2.3'], ['1.3.1', '1.3.2', '1.3.3'] ], [ ['2.1.1', '2.1.2', '2.1.3'], ['2.2.1', '2.2.2', '2.2.3'], ['2.3.1', '2.3.2', '2.3.3'] ], [ ['3.1.1', '3.1.2', '3.1.3'], ['3.2.1', '3.2.2', '3.2.3'], ['3.3.1', '3.3.2', '3.3.3'] ], [ ['4.1.1', '4.1.2', '4.1.3'], ['4.2.1', '4.2.2', '4.2.3'], ['4.3.1', '4.3.2', '4.3.3'] ], [ ['5.1.1', '5.1.2', '5.1.3'], ['5.2.1', '5.2.2', '5.2.3'], ['5.3.1', '5.3.2', '5.3.3'] ] ]; var oneSel = document.getElementById("One"); var twoSel = document.getElementById('Two'); var threeSel = document.getElementById('Three'); var str = ''; //下拉框一初始選項 for (var index = 0; index < oneArray.length; index++) { str += "<option value='" + index + "'>" + oneArray[index] + "</option>"; } oneSel.innerHTML = str; str = ''; //下拉框二初始選項 for (var index = 0; index < twoArray[0].length; index++) { str += "<option value='" + index + "'>" + twoArray[0][index] + "</option>"; } twoSel.innerHTML = str; str = ''; //下拉框三初始選項 for (var index = 0; index < threeArray[0].length; index++) { str += "<option>" + threeArray[0][0][index] + "</option>"; } threeSel.innerHTML = str; //動態改變下拉框二選項 function changeTwoSel() { twoSel.innerHTML = ''; str = ''; var twoSelValue = parseInt(oneSel.value); try { for (var index = 0; index < twoArray[twoSelValue].length; index++) { str += "<option value='" + index + "'>" + twoArray[twoSelValue][index] + "</option>"; } } catch (ex) { str = "<option>無選項</option>"; } twoSel.innerHTML = str; changeThreeSel(); } //動態改變下拉框三選項 function changeThreeSel() { threeSel.innerHTML = ''; str = ''; var twoSelValue = parseInt(oneSel.value); var threeSelValue = parseInt(twoSel.value); try { for (var index = 0; index < threeArray[twoSelValue][threeSelValue].length; index++) { str += "<option value='" + index + "'>" + threeArray[twoSelValue][threeSelValue][index] + "</option>"; } } catch (ex) { str = "<option>無選項</option>"; } threeSel.innerHTML = str; } </script> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:(1).var oneSel = document.getElementById("One"),獲取對應id的元素物件
(2).oneSel .onchange = function () { changeTwoSel() },為第一個select下拉選單註冊onchange事件處理函式。
(3).var oneArray = ['請選擇', '1', '2', '3', '4', '5'],儲存第一級select下拉選單的資料。
(4).var twoArray = [ ['請選擇'],
['1.1', '1.2', '1.3'],
['2.1', '2.2', '2.3'],
['3.1', '3.2', '3.3'],
['4.1', '4.2', '4.3'],
['5.1', '5.2', '5.3']
];
儲存第二個select下拉選單的資料。
(5).var threeArray = [ [
['請選擇']
],
[
['1.1.1', '1.1.2', '1.1.3'],
['1.2.1', '1.2.2', '1.2.3'],
['1.3.1', '1.3.2', '1.3.3']
],
[
['2.1.1', '2.1.2', '2.1.3'],
['2.2.1', '2.2.2', '2.2.3'],
['2.3.1', '2.3.2', '2.3.3']
],
[
['3.1.1', '3.1.2', '3.1.3'],
['3.2.1', '3.2.2', '3.2.3'],
['3.3.1', '3.3.2', '3.3.3']
],
[
['4.1.1', '4.1.2', '4.1.3'],
['4.2.1', '4.2.2', '4.2.3'],
['4.3.1', '4.3.2', '4.3.3']
],
[
['5.1.1', '5.1.2', '5.1.3'],
['5.2.1', '5.2.2', '5.2.3'],
['5.3.1', '5.3.2', '5.3.3']
]
],儲存第三級下拉選單的資料。
(6).var str = '',宣告一個變數並賦值為空字串,後面會用到。
(7).for (var index = 0; index < oneArray.length; index++) {
str += "<option value='" + index + "'>" + oneArray[index] + "</option>";
},遍歷第一個陣列,為第一個select下拉選單準備option字串內容。
(8).oneSel.innerHTML = str,生成下拉選單選項。
(9).str = '',將str重置為空。
(10).for (var index = 0; index < twoArray[0].length; index++) {
str += "<option value='" + index + "'>" + twoArray[0][index] + "</option>";
},和上面是同樣的道理。
(11).function changeTwoSel() {},第一個select下拉選單的onchange事件處理函式呼叫的函式。他可以實現根據第一個select下拉選單的選中項,來設定第二個下來選單的option項的內容。
(12).twoSel.innerHTML = '',首先將第二個下拉選單的內容清空。
(13).str = '',將str內容重置為空。
(14).var twoSelValue = parseInt(oneSel.value),將獲取的第一個select下拉選單的值轉換為整數。
(15).try {
for (var index = 0; index < twoArray[twoSelValue].length; index++) {
str += "<option value='" + index + "'>" + twoArray[twoSelValue][index] + "</option>";
}
} catch (ex) {
str = "<option>無選項</option>";
},加入我們選取的是第一個select下拉選單第三項,對應值是2的那一項。
那麼對應的第二個select下拉選單的資料就是twoArray陣列中['2.1', '2.2', '2.3']這一項。
通過for迴圈遍歷,將其中的值生成為option項。
二.相關閱讀:
(1).onchange事件可以參閱javascript change事件一章節。
(2).innerHTML可以參閱innerHTML一章節。
相關文章
- select下拉選單級聯效果例項程式碼
- select級聯下拉選單程式碼例項分析
- select下拉選單多級級聯效果程式碼例項
- jquery select選中表單特效三級聯動jQuery特效
- jQuery 省市級聯選單程式碼例項jQuery
- js省市級聯選單程式碼例項JS
- JavaScript 動態生成select下拉選單JavaScript
- 動態生成select選項全接觸
- Android實現三級聯動下拉框 下拉選單spinner的例項程式碼Android
- select下拉選單二級聯動
- 動態生成select選項全接觸 (轉)
- select下拉選單美化程式碼例項
- JavaScript動態生成年份select下拉選單JavaScript
- phpqrcode生成動態二維碼簡單例項PHP單例
- css三級下拉導航選單程式碼例項CSS
- jQuery美化select下拉選單程式碼例項jQuery
- jQuery操作select下拉選單程式碼例項jQuery
- 模擬select下拉選單程式碼例項
- select下拉選單項互換效果程式碼例項
- javascript刪除select下拉選單項程式碼例項JavaScript
- AttachXMLForSelect:XML自動關聯多級SELECT選單程式碼和例子 (轉)XML
- 小程式:動態資料實現三級聯動選擇器
- 原生javascript操作select下拉選單程式碼例項JavaScript
- 模擬美化select下拉選單程式碼例項
- JavaScript動態設定select下拉選單預設選項JavaScript
- javascript動態修改單元格內容程式碼例項JavaScript
- js如何動態為select下拉選單新增option項JS
- css二級下拉選單程式碼例項CSS
- 模擬實現select下拉選單例項程式碼單例
- 刪除和新增select下拉選單option項程式碼例項
- JavaScript動態操作select下拉選單JavaScript
- JavaScript動態建立select下拉選單JavaScript
- javascript動態建立元素程式碼例項JavaScript
- javascript新增和刪除select下拉選單option項程式碼例項JavaScript
- 通過ajax方式動態新增select下拉選單的option選項
- js模擬實現select下拉選單程式碼例項JS
- 出生日期三級聯動下拉選單
- jQuery結合PHP+MySQL實現二級聯動下拉選單[例項]jQueryPHPMySql