JS-省市二級聯動
阿新 • • 發佈：2018-12-10
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* <option value="0">北京</option> <option value="1">河北</option> <option value="2">山東</option> <option value="3">江蘇</option> * */ //定義陣列儲存市區的資料 var arr0 = ["海淀" ,"昌平" ,"順義" , "通州"]; var arr1 = ["邯鄲" ,"唐山" ,"石家莊" , "廊坊"]; var arr2 = ["日照" ,"青島" ,"煙臺" , "濟南"]; var arr3 = ["無錫" ,"南京" ,"徐州" , "蘇州"]; var arr = [ arr0 , arr1, arr2 , arr3 ];//二維陣列 //onchange 改變事件 一般下拉框使用 只有在下拉框的選項中發生變化 才會觸發 function selectCity(){ //2.獲得當前選擇省的value值 確定了省份 var proVal = document.getElementById("provinceId").value; //alert(proVal); var cityArr = arr[proVal]; //alert(cityArr); //新增資料之間 將資料恢復 document.getElementById("cityId").innerHTML="<option value=\"\">‐‐請選擇市‐‐</option>"; //遍歷市區的資料 往下拉框中新增 for(var i = 0 ; i<cityArr.length ; i++){ //獲得市區的下拉框物件 往內部新增內容 //+= 表示追加 document.getElementById("cityId").innerHTML += "<option>"+cityArr[i]+"</option>"; } } </script> </head> <body> <select id="provinceId" onchange="selectCity()" > <option>‐請選擇‐</option> <option value="0">北京</option> <option value="1">河北</option> <option value="2">山東</option> <option value="3">江蘇</option> </select> <select id="cityId"> <option value="">‐‐請選擇市‐‐</option> </select> </body> </html>