Jquery实现省市联动的

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
       <script>
           var provinces = [
               ["深圳市","东莞市","惠州市","广州市"],
               ["长沙市","岳阳市","株洲市","湘潭市"],
               ["厦门市","福州市","漳州市","泉州市"]
           ];
           $(function(){
               $("#province").change(function(){
                   var cities = provinces[this.value];
                   //清空城市select中的option
                   /*var $city = $("#city");
                   //将JQ对象转成JS对象
                   var citySelect = $city.get(0)
                   citySelect.options.length = 0;*/

                   $("#city").empty(); //采用JQ的方式清空
                   //遍历城市数据
                   $(cities).each(function(i,n){
                       $("#city").append("<option>"+n+"</option>");
                   });
               });
           });



       </script>
   </head>
   <body>
       
       <select id="province">
           <option value="-1">--请选择--</option>
           <option value="0">广东省</option>
           <option value="1">湖南省</option>
           <option value="2">福建省</option>
       </select>
       
       <select id="city">

       </select>
   </body>
</html>

沉默的猫小弟

发布了21 篇原创文章 · 获赞 7 · 访问量 2万+

私信关注

Jquery实现省市联动的

猜你喜欢