jquery实现二级联动

闲来没事，写点jquery练练手。

var pron_city = {
    '省':['all'],
    '北京':[
        {'市':[]},
        {'海淀区':[]},
        {'东城区':[]},
        {'西城区':[]},
        {'昌平区':[]},
        {'怀柔区':[]},
        {'朝阳区':[]}
        ],
    '山东':[
        {'市':[]},
        {'济南':['区','历城区','历下区','槐荫区','市中区']},
        {'青岛':['区','一区','二区']}
        ],
    '河北':[
        {'市':[]},
        {'石家庄':['区','三区','四区']},
        {'唐山':['区','五区','六区']},
        {'保定':['区','七区','八区']}
        ]
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<style>

</style>
</head>
<script src="../js/jquery.js"></script>
<style>
    body{background-color:#435a9d;}
    ul,li{margin:0;padding:0;}
    .abc{
        420px;
        height:480px;
        margin:100px;
    }
    select{
        110px;
        margin-left:10px;
    }
</style>
<script src="liandong.json"></script>
<script>
$(document).ready(function(){
    for(var i in pron_city){
        var html_pn = "<option>"+i+"</option>";
        $('.province').append(html_pn);
    }
    var province , city , index;
    $('.province').change(function(){
        $('.city,.block').empty();
        province = $(this).val();
        for(var j in pron_city[province]){
            for(var m in pron_city[province][j])
            {
                var html_cy = "<option>"+m+"</option>";
                $('.city').append(html_cy);
            }
        }
    })
    $('.city').change(function(){
        $('.block').empty();
        city = $(this).val();
        index = $(this)[0].selectedIndex;
        for(var k in pron_city[province][index][city]){
            html_bk = "<option>"+pron_city[province][index][city][k]+"</option>";
            $('.block').append(html_bk);
        }
    })
    
})
 </script>
 <body>
    <div class="abc">
        <select class="province">            
        </select>
        <select class="city">
            <option selected>市</option>
        </select>
        <select class="block">
            <option selected>区</option>
        </select>
    </div>
</body>
</html>