<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二級聯動</title> <script> // 創建一個二維數組 var arr = new Array(2); arr[0] = ["廣東","廣州","深圳","佛山"]; arr[1] = ["湖北","荊州","武漢","赤壁"]; function choose(val){ // 獲取city的select var city = document.getElementById("city"); // 獲取option var cityOp = city.getElementsByTagName("option"); // 設置可操作 city.disabled = false; // 先刪除，后添加 for (var i = 0; i < cityOp.length; i++) { var op = cityOp[i]; // 刪除option city.removeChild(op); //數組長度發生變化，需處理 i--; } // 遍歷 for (var i = 0; i < arr.length; i++) { //取一維數組 var arr1 = arr[i]; //取一維數組的第一個值 var firstVal = arr1[0]; //判斷 if(firstVal == val){ //遍歷 for (var j = 1; j < arr1.length; j++) { // 獲取城市名 var value = arr1[j]; // 創建option var optionl = document.createElement("option"); // 創建文本 var textl = document.createTextNode(value); // 把文本添加到標簽 optionl.appendChild(textl); //添加到city里面 city.appendChild(optionl); } } } } </script> </head> <body> <select id="province" onchange="choose(this.value)"> <option value="0">--請選擇省--</option> <option value="廣東">廣東</option> <option value="湖北">湖北</option> </select> <select id="city" disabled="disabled"> <option value="0">--請選擇市--</option> </select> </body> </html>