1.效果
2.代码
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>二级联动</title> <script> var arr = new Array(3);//6.造一个数组先将所有的区县保存在数组中 arr[0] = new Array("溧水县","高淳县");// 溧水县、高淳县 arr[1] = new Array("张家港市","常熟市","礼太仓市")//"昆山市","吴江市";// 张家港市、常熟市、太仓市、昆山市、吴江市 arr[2] = new Array("东海县","灌云县","灌南县 ");//东海县、灌云县、灌南县 function changecity(val){//3.接受用户选择的市 对应的value值 var quxianElement = document.getElementById("xianqu");//4.拿到县区对象 quxianElement.options.length=0; //5.每次用户重新选择了市 就将原来的区县内容清空 for(var i=0 ; i<arr.length;i++){ if(i==val){//7.拿到用户选择的 for(var j=0;j<arr[i].length;j++){//8.循环遍历用户选择的先 对应的区县 var textNode = document.createTextNode(arr[i][j]);//9.拿到每一个区县（就是一个String类型内容） var opElement = document.createElement("option");//10.创建 option对象 opElement.appendChild(textNode);//11.将县区中的元素放到option对象中 quxianElement.appendChild(opElement);//12.option对象放到区县对象里面 作为子节点 } } } } </script> </head> <body> <h2 align="center">二级联动</h2> <table align="center" border="1px" cellpadding="0px" cellspacing="0px"> <tr> <td> <select name="city" οnchange="changecity(this.value)"> <option>--请选择城市-</option> <option value="0">南京市</option> <!--1.这里的value值需要带上--> <option value="1">苏州市</option> <option value="2">连云港市 </option> </select> <select name="xianqu" id="xianqu"> <!--2.区县的选择框--> </select> </td> </tr> </table> </body> </html>