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>

<!--效果图-->

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值