JavaScript中省市二級聯動建立方法
阿新 • • 發佈：2018-12-08
大家好，我是今天的博主，<一個想做全棧的鹹魚> 今天和大家一起學習一下JavaScript中省市二級聯動建立方法
分析:
1、使用（onchange）事件，繫結一個函式
2、建立一個二維陣列來儲存省份和城市，陣列分別來存放省份和城市
3、來獲取使用者選擇的省份，所有的值由value來控制，怎樣來獲取value？
4、使用方法傳參的方式來獲取(this.value)可以獲取到value的值
5、遍歷陣列，(獲取省份與使用者選擇的省份做比較，如果選擇的省份相同，繼續遍歷該省份下 所有的城市資訊)
6、建立城市文字節點
7、建立option元素節點
8、將城市文字新增到元素節點中
9、獲取第二個下拉列表，並將option元素節點新增進去
CreateTextNode() createElement() appendChild()
10、每次操作前清空第二個下拉列表的option內容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>省市二級聯動</title> <script> //1.建立一個二維陣列用於儲存省份和城市 var cities = new Array(3); cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市"); cities[1] = new Array("長沙市","郴州市","株洲市","岳陽市"); cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市"); cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市"); function changeCity(val){ //7.獲取第二個下拉列表 var cityEle = document.getElementById("city"); //9.清空第二個下拉列表的option內容 cityEle.options.length=0; //2.遍歷二維陣列中的省份 for(var i=0;i<cities.length;i++){ //注意，比較的是角標 if(val==i){ //3.遍歷使用者選擇的省份下的城市 for(var j=0;j<cities[i].length;j++){ //alert(cities[i][j]); //4.建立城市的文字節點 var textNode = document.createTextNode(cities[i][j]); //5.建立option元素節點 var opEle = document.createElement("option"); //6.將城市的文字節點新增到option元素節點 opEle.appendChild(textNode); //8.將option元素節點新增到第二個下拉列表中去 cityEle.appendChild(opEle); } } } } </script> </head> <body> <table border="1" width="300" height="300" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <select onchange="changeCity(this.value)"> <option>--請選擇--</option> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select> </td> </tr> </table> </body> </html>
好了，今天的學習總結完畢，大家有什麼問題，在下方留言即可。