1 <!DOCTYPE html>
2 <html >
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 >
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 >
43 <option value="-1">-请选择-</option>
44 </select>
45 </body>
46 </html>