javascript - jqeury 实现省市区三级联动 当选中省后怎么把省下面的市显示到select里去?

Question

<select name="select01" id="select01"></select>
<select name="select02" id="select02"></select>
<select name="select03" id="select03"></select>

    function json01(){
        $.ajax({
            type:"POST",
            url: "/ajax/jquery/city.json",
            dataType: "json",
            success: function(data){
                con = "";
                $.each(data, function(i,e){
                    con += "<option>"+e.name+"</option>";
                    $("#select01").html(con);
                })
            }
            })
    }
json01();

$("#select01").click(function(){
        $.ajax({
            type:"POST",
            url: "/ajax/jquery/city.json",
            dataType: "json",
            success: function(data){
                con = "";
                $.each(data, function(i,e){
                    var nn = e.city;
                    for (var j = 0; j<nn.length; j++) {
                        var mm = nn[j].area;
                        for (var k = 0; k < mm.length; k++) {
                            con += "<option>"+mm[k]+"</option>";
                            //console.log(mm[k])
                        }
                        //console.log(nn[j].name)
                    }
                });
                $("#select02").html(con);
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                console.log(XMLHttpRequest + "/" + textStatus + "/" + errorThrown)
            }
        })
    })

[
{ "name": "北京", "city":[{"name":"北京", "area":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","平谷区","怀柔区","密云县","延庆县"]}]},
{ "name": "天津", "city":[{"name":"天津", "area":["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","宁河县","静海县","蓟  县"]}]}
]

目前的问题:
默认可以把所有的省加载到第一个select里去,选中省后第二个select把json里的所有市都显示在第二个select里了

想实现的效果:
选中北京 第二个select显示的是北京,选择第二个select的时候,第三个select显示区.

Answer 1

var data = [
{ "name": "北京", "city":[{"name":"北京", "area":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","平谷区","怀柔区","密云县","延庆县"]}]},
{ "name": "天津", "city":[{"name":"天津", "area":["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","宁河县","静海县","蓟  县"]}]},
{"name": "省", "city": [{"name": "市1", "area": ["区a"]}, {"name": "市2", "area" : ["区b"]}]}
]

var con = '';
$.each(data,function(i,e){
    con += "<option>"+e.name+"</option>";
    $("#select01").html(con);
})

// var data;
// //请求数据
// $.ajax({
//     type:"POST",
//     url: "/ajax/jquery/city.json",
//     dataType: "json",
//     success: function(res){
//         data = res;

//         //先填上第一个的

//         var con = '';
//         $.each(data,function(i,e){
//             con += "<option>"+e.name+"</option>";
//             $("#select01").html(con);
//         })
//     }
// })

var targetCities;

$("#select01").click(function(e){
    var target = e.target.value;

    var targetProvince = data.filter(function(item){
        if(item.name === target){
            return item
        }
    })

    targetCities = targetProvince[0].city
    var targetArea = targetCities[0].area

    var cityContent = '';
    targetCities.map(function(city){
        return cityContent += "<option>" + city.name + "</option>"
    })

    var areaContent = "";
    targetArea.map(function(area){
        return areaContent += "<option>" + area + "</option>"
    })

    $("#select02").html(cityContent)
    $("#select03").html(areaContent)

})

$("#select02").click(function(e){
    var target = e.target.value;

    var targetCity = targetCities.filter(function(item){
        if(target === item.name) return item
    })

    var targetArea = targetCity[0].area;

    var areaContent = "";
    targetArea.map(function(area){
        return areaContent += "<option>" + area + "</option>"
    })
    $("#select03").html(areaContent)
})

重复的地方比较多 简洁版如下：

var data = [
{ "name": "北京", "city":[{"name":"北京", "area":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","平谷区","怀柔区","密云县","延庆县"]}]},
{ "name": "天津", "city":[{"name":"天津", "area":["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","宁河县","静海县","蓟  县"]}]},
{"name": "省", "city": [{"name": "市1", "area": ["区a"]}, {"name": "市2", "area" : ["区b"]}]}
]

var _this = this;
var targetCities;

$("#select01").change(function(e){
    var targetProvice = _this.find(e.target.value, data)
    targetCities = targetProvice[0].city

    _this.render(targetCities, '#select02')
    $('#select02').trigger('change')
})

$("#select02").change(function(e){
    var targetCity = _this.find(e.target.value, targetCities)
    _this.render(targetCity[0].area, '#select03')
})

function find(value, source){
    return source.filter(function(item){
        if(value === item.name) return item
    })
}

function render(target, select){
    var content = '';
    target.map(function(item){
        content += "<option>" + (item.name || item) + "</option>"
    })
    $(select).html(content)
}

this.render(data, '#select01')
$("#select01").trigger('change');