動態生成select三級聯動選單程式碼例項

admin發表於2017-04-15
原文網址 : https://www.softwhy.com/article-7225-1.html

分享一段程式碼例項，它實現了動態生成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一章節。

相關文章