jQuery 省份选择

 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>

执行结果：