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>