20行核心代码:jQuery实现省市二级联动

 

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js">    </script>
        <script>
        $(function(){
            $("#provinceId").change(function(){
                var arr = [["郑州","开封","洛阳"],["济南","青岛","淄博"],["东城","西城","海淀"]];
                $("#cityId").html("<option>选择城市</option>")
                var index = this.selectedIndex;
                if(index != 0){
                     var citys = $.each(arr[index-1], function(i,obj) {
                     var $newOp = $("<option>"+obj+"</option>");
                     $("#cityId").append($newOp);
                    });
                }else{
                    $("#cityId").html("<option>选择---城市</option>")
                }
            });
        });
        </script>
    </head>
    <body>
        <div align="center">
        <select id="provinceId">
            <option>选择省份</option>
            <option>河南</option>
            <option>山东</option>
            <option>北京</option>
        </select>
        <select id="cityId">
            <option>选择城市</option>
        </select>
        </div>
    </body>
</html>

 

posted @ 2018-04-11 16:47  cheney-yang  阅读(167)  评论(0)    收藏  举报