Jquery 实现下拉列表三级联动-蒲公英云

Jquery 实现下拉列表三级联动

需求: (1) 根据省、获得市、

(2) 通过市，再获得到县，

(3) 每个下拉框数据都由一个数组组成;

效果：

初始页面

加载省份

通过选择省份，获得对应的市

再通过市，获得对应的区

HMTL代码：

<body>
        省份：<select id="selProvince">
            <option value="-1">--请选择--</option>
        </select>
        城市：<select id="selCity">
            <option value="-1">--请选择--</option>
        </select>
        </select>
        区：<select id="selArea">
            <option value="-1">--请选择--</option>
        </select>
    </body>

<script type="text/javascript">
    $(function(){
        //初始化参数
        var provinces = ['浙江','江苏','安徽'];
        var citys =[['杭州','宁波','温州'],['南京','无锡','苏州'],['合肥','安庆','黄山']];
        var aears =[ [['上城区','下城区','西湖区','拱墅区'],['江北区','慈溪市'],['鹿城区','乐清市']],
        [['玄武区','鼓楼区'],['滨湖区','宜兴市 '],['虎丘区','姑苏区']],
        [['庐阳区','长丰县'],['迎江区','桐城市'],['黄山区','休宁县']]];
       // alert(provinces.length);
        //add province
        for (var i = 0; i <provinces.length; i++) {
              $("#selProvince").append("<option value=p"+i+">"+provinces[i]+"</option>");
        }
        var pIndex=0;
        //provinces change
        $("#selProvince").change(function(){
            //第一个不移除
            $("#selCity").children().not(":first").remove();
            //select province value=>index
             pIndex=$(this).children("option:selected").index();
            //city index from 0;
            var city =citys[pIndex-1];
            //循环
            for (var i = 0; i < city.length; i++) {
                  $("#selCity").append("<option value=c"+i+">"+city[i]+"</option>");
            }
        });
        //citys change
         $("#selCity").change(function(){
             //第一个不移除
            $("#selArea").children().not(":first").remove();
            //获得city的索引
            var cIndex=$(this).children("option:selected").index();
            //获得area
            var are=aears[pIndex-1][cIndex-1];
            for (var i = 0; i < are.length; i++) {
                  $("#selArea").append("<option value=a"+i+">"+are[i]+"</option>");
            }
         });
     });
</script>