jquery实现级联遇到的ajax同步请求、动态DOM元素监听事件

记录一次实现级联菜单选项遇到的一系列问题

实现动态生成select下拉选项

json数据格式example：

[
{
"eventType":"101一般交通事故",
"eventTypeCont":["前方车辆抛锚\n注意减速避让","前方三车追尾\n注意减速避让","前方有车停靠\n减速小心驾驶","前方路有杂物"]
},
{
"eventType":"102严重交通事故",
"eventTypeCont":["前方道路坍塌","车辆爆炸\n请绕行"]
}
]

获取JSON格式的文件，动态生成一级下拉选项框

let eventHtml="";
eventHtml+="<label class='control-label col-md-2' for='eventType'>事件类型</label><div class='col-md-4'>"+
"<select class='form-control contentType' id='contentType'>"+
"<option value='-1'>请选择</option>";

一级菜单获取：

$.ajaxSetup({
async:false
});
//设置同步ajax请求json文件，获取到的数据作为select的option选项值，需要等待完成获取并生成eventHtml，
//若非同步，则导致渲染到页面的select没有选项值，且因为div标签不闭合导致其他页面混乱.
$.getJSON("../eventType.json",function(data){
$.each(data,function(key,val){
eventHtml+="<option value='"+key+"'>"+val.eventType+"</option>";
});
//获取到的data，key为数据下标，val为原始数据
eventHtml+="</select></div><label class='control-label col-md-2'>事件内容</label><div class='col-md-4'>"+
"<select class='form-control contentInfo' id='contentInfo' >"+
"<option value='-1'>请选择</option></select></div>";
})
$.ajaxSetup({
async:true
});
//ajax请求同步只针对于这一请求，结束之后设置为异步，避免全局污染

目前的效果如下：



2.选择一级菜单选项之后，动态加二级菜单选项

一级菜单是动态生成添加的，一般的事件绑定没有作用，使用.live()绑定事件

$("#contentType").live("change",function(){
$.ajaxSetup({
async:false
});
//事件响应中有ajax请求，需要设置ajax同步请求
let eventT=$("#contentType option:selected").val();
//事件内容选项清空
$("#contentInfo").empty();
$.getJSON("../eventType.json",function(data){
let opt="<option value='-1'>请选择</option>";
$.each(data,function(key,val){
if(eventT==key){
if(val.eventTypeCont.length==0){
return false;
}else{
for(let i=0;i<val.eventTypeCont.length;i++){

4000
opt+="<option value='"+val.eventTypeCont[i]+"'>"+val.eventTypeCont[i]+"</option>";
}
}

}
});
//获取到一级菜单选择下标值，匹配对应的原数据，eventTypeCont进行渲染
$("#contentInfo").append(opt);
})
$.ajaxSetup({
async:true
});
});

select获取选中项的值，val()获取到option中的value，text()获取到option的文本内容

实现效果：





json文件中事件消息中有换行加入了“\n”,动态选择消息内容会有换行的效果，

效果如下：