二级联动

Posted 2021-03-04 poisonousmushrooms

html：<span id="lab_game"></span>

JS：
$(document).ready(function () {
var xselect = ‘‘
var nselect = ‘‘
$.ajax({
type: "post",
url: "__ROOT__/area/getAppInfo",
data:‘‘,
dataType: "json",
success: function (res) {
console.log(res)
for(i=0;i<res.data.length;i++){
xselect += ‘<option value="‘+res.data[i].area_id+‘">‘+res.data[i].area_name+‘</option>‘
}
for(u=0;u<res.data[0].app_info.length;u++){
nselect += ‘<option value="‘+res.data[0].app_info[u].app_id+‘">‘+res.data[0].app_info[u].name+‘</option>‘
}
$("#lab_game").append(‘<label class="col-sm-2 control-dy">地区：</label>‘+
‘<div class="col-sm-8 form-time1">‘+
‘<select class="form-control form-select" id="area_id">‘+xselect+
‘</select>‘+
‘</div>‘+
‘<label class="col-sm-2 control-dy">游戏：</label>‘+
‘<div class="col-sm-8 form-time1">‘+
‘<select class="form-control form-select" id="app_id">‘+
‘<option value="">请选择状态</option>‘+ nselect +
‘</select>‘+
‘</div>‘)

$("#area_id").change(function(){
console.log($(this).val())
var this_value = $(this).val();
for(var i=0;i<res.data.length;i++){
var now_data = res.data[i];
if(now_data.area_id==this_value){
var str = "";
for(var j=0;j<now_data["app_info"].length;j++){
var now_data_ = now_data["app_info"][j];
str += ‘<option value="‘+now_data_.app_id+‘">‘+now_data_.name+‘</option>‘
}
$("#app_id option:gt(0)").remove();
$("#app_id").append(str);
}
}
})
}
});
})

数据结构：

{
    "code": 0,
    "mess": "成功",
    "data": [
        {
            "area_id": 1,
            "area_name": "天津",
            "app_info": [
                {
                    "app_id": 26891,
                    "name": "盼盼1.0"
                },
                {
                    "app_id": 71988,
                    "name": "盼盼2.0"
                }
            ]
        },
        {
            "area_id": 2,
            "area_name": "四川省",
            "app_info": [
                {
                    "app_id": 26893,
                    "name": "旺旺1.0"
                },
                {
                    "app_id": 26894,
                    "name": "旺旺2.0"
                }
            ]
        }
    ]
}