省市区三级联动的实现

html页面

<select id="country" name="country">
    <option selected="selected" value="" id="guo">中国</option>
</select>
<select id="province" name="province">
    <option selected="selected" value="" id="sheng">请选择省市</option>
</select>
<select id="city" name="city">
    <option selected="selected" value="" id="shi">请选择市区</option>
</select>
<select id="district" name="district">
    <option selected="selected"  value="" id="qu">请选择区县</option>
</select>

//建立省市区级联

//加载城市，城市的级联效果------/*级联库见联动编辑实现的文章内容*/
$.each(provinces, function (i, item) {
    var options = "<option selected='selected' value=''>" + provinces[i].province + "</option>";
    $('#province').append(options);
});
$('#province').change(function(){
    $('#district').html('#qu');
    $('#city').html('#shi');
    var city=$('#province').find('option:selected').index()-1;
    $.each(provinces[city].city,function(i) {
        var options = "<option  selected='selected' value=''>" + provinces[city].city[i].n+ "</option>";
        $('#city').append(options);
    });
    $('#district').html($('#qu'));
    var city=$('#province').find('option:selected').index()-1;
    //alert(city);
    var district=$('#city').find('option:selected').index();
    $.each(provinces[city].city[district].district,function(i) {
        var options = "<option>" + provinces[city].city[district].district[i] + "</option>";
        $('#district').append(options);
    });
    $('#district').html($('#qu'));
    var city=$('#province').find('option:selected').index()-1;
    var district=$('#city').find('option:selected').index();
    $.each(provinces[city].city[district].district,function(i) {
        var options = "<option>" + provinces[city].city[district].district[i] + "</option>";
        $('#district').append(options);
    });
});
$('#city').change(function(){
    $('#district').html($('#qu'));
    var city=$('#province').find('option:selected').index()-1;
    var district=$('#city').find('option:selected').index();
    //alert(provinces[city].city[district].district[0].s);
    $.each(provinces[city].city[district].district,function(i) {
        var options = "<option>" + provinces[city].city[district].district[i] + "</option>";
        $('#district').append(options);
    });
});