1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jq_Demo1</title> 6 <script type="text/javascript" src="js/jquery-1.8.2.js" ></script> 7 </head> 8 <body> 9 <select id="province"> 10 <option value="-1">请选择</option> 11 </select> 12 13 <select id="city"> 14 <option value="-1">请选择</option> 15 </select> 16 </body> 17 <script type="text/javascript"> 18 $(function(){ 19 var pro=["广东","广西","福建"]; 20 var ci=[["广州","深圳","珠海"],["南宁","玉林","桂林"],["莆田","福州","厦门"]]; 21 22 //将数组中省份假入到选择项中去 23 $(pro).each(function(i,v){ 24 $("#province").append("<option value='"+i+"'>"+v+"</option>"); 25 }); 26 27 $("#province").change(function(){ 28 //每次选择省份之后都还原 29 $("#city").html("<option value='-1'>请选择</option>") 30 //获取省份的索引值 31 var proIndex=this.value; 32 // alert(proIndex); 33 //根据索引值遍历城市 34 $(ci[proIndex]).each(function(i,v){ 35 $("#city").append("<option value='+i+'>"+v+"</option>"); 36 }); 37 }); 38 }); 39 </script> 40 </html>
执行结果：
2、使用已经编好的js，代码直接调用。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jq_Demo2</title> 6 <script type="text/javascript" src="js/jquery-1.8.2.js" ></script> 7 <script type="text/javascript" src="js/jquery.provincesCity.js" ></script> 8 <script type="text/javascript" src="js/provincesdata.js" ></script> 9 </head> 10 <body> 11 <div id="province"> 12 13 </div> 14 </body> 15 <script type="text/javascript"> 16 $("#province").ProvinceCity(); 17 </script> 18 </html>
执行结果：
