<!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>