js实现简单的二级联动

HTML代码：

        <select id="d1" οnchange="changeporvien()">
            <option>==请选择身份</option>
            <option>四川</option>
            <option>北京</option>
            <option>上海</option>
            <option>浙江</option>
        </select>
        <select id="d2">
            <option>==请选择城市</option>
        </select>

js代码：

<script>

          //定义一个嵌套的数组
            var citys = [
                        ['成都','资阳','自贡','眉山'],
                        ['北京','天安门'],
                        ['浦东','保安'],
                        ['杭州','温州','宁波']
                    ];
            function changeporvien(){
                $("#d2").empty();   //每次改变第一个select标签的元素时将第二个select标签的内容清空
                var porvien =$("#d1").prop('selectedIndex');  //找到select标签被选元素的下标
                var city = citys[porvien-1];

                //each循环 
                $.each(city,function(n,v){
                    $("#d2").append("<option>"+v+"</option>");
                })
            }
        </script>