1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>標題</title> 6 <script type="text/javascript" src="js/jquery-3.4.1.js"></script> 7 <script type="text/javascript"> 8 var provinceArr = new Array(5); //定義數組保存二級市級名稱 9 provinceArr[0]=new Array("北京市"); 10 provinceArr[1]=new Array("鄭州市","洛陽市","濮陽市","駐馬店市"); 11 provinceArr[2]=new Array("石家庄市","唐山市","秦皇島市","邯鄲市"); 12 provinceArr[3]=new Array("西安市","寶雞市","延安市"); 13 provinceArr[4]=new Array("菏澤市","濟南市","青島市"); 14 15 $(function () { 16 $("#province").change(function () { 17 $("#city").empty(); //清空city的下拉列表 18 var provinceID=this.value; 19 if(provinceID==-1){ 20 $("#city").html("<option value=\"-1\">-請選擇-</option>"); 21 }else { 22 for(var i=0;i<provinceArr[provinceID].length;i++){ 23 // console.log(provinceArr[provinceID][i]); 24 var option = document.createElement("option"); //加入option標簽 25 option.innerText=provinceArr[provinceID][i]; 26 $("#city").append(option); //append方法直接加入內容 —— option變量包含html標簽和內容 27 } 28 } 29 }); 30 }); 31 </script> 32 </head> 33 <body> 34 <select id="province"> 35 <option value="-1">-請選擇-</option> 36 <option value="0">北京市</option> 37 <option value="1">河南省</option> 38 <option value="2">河北省</option> 39 <option value="3">陝西省</option> 40 <option value="4">山東省</option> 41 </select> 42 <select id="city"> 43 <option value="-1">-請選擇-</option> 44 </select> 45 </body> 46 </html>