求助!!!弹出层中的联合下拉框无法加载二级子菜单,一级菜单可以正常加载

提问 已结 10 479
盆盆诶
盆盆诶 2020-4-1
悬赏:200飞吻
版本:layui 2.x 浏览器:谷歌
我在做一个开发项目,目前在弹出层中新增了一个表单。
表单中有一个联合下拉框,在表单刚弹出时,联合下拉框中的一级下拉框可以正常获取后台的数据
然后监听一级下拉框,想要通过获取value来动态生成二级下拉框的option,但这无法正常显示,其中$.get()方法的数据是返回了。
就是无法正确的添加进option中 该怎么办?急急急

而且经过我测试,在form.on('type_one')中,$('#type_two').html("")也是无效的。

表单的html代码:
<div class="layui-row" id="add_info_form"  style="display:none;">
<div class="layui-col-md10">
<form class="layui-form" lay-filter="select_form" >
<div class="layui-form-item">
<label class="layui-form-label">故障模式:</label>
<div class="layui-input-inline">
<input type="text" name="emodeltype" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<lable class="layui-form-lable">故障模式类别</lable>
<div class="layui-inpit-inline">
<select id="type_one" lay-filter="type_one" lay-verify="required" lay-secrch="">
<option value="">下拉菜单选择一级类型</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inpit-inline" >
<select id="type_two" lay-filter="type_two" lay-verify="required" lay-secrch="">
<option value="">下拉菜单123</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inpit-inline">
<select id="type_three" lay-filter="type_three" lay-verify="required" lay-secrch="">

</select>
</div>
</div>
</form>
</div>
</div>
监听代码:
function add_form(){
layui.use(['form','layer','jquery'],function(){
var form=layui.form;
layer=parent.layer===undefined?layui.layer:parent.layer
,$=layui.jquery;
$.ajaxSettings.async = false;
$.get("/tree/type",{"parent":0},function(data,status){
if(status!="success"){
layer.msg("请求错误")
}else{
var $html="";
if(data.data!=null){
$.each(data.data,function(index,item){
$html+="<option value="+item.id+">"+item.name+"</option>";
console.log($html);
});
$("#type_one").append($html);
}
}
});
layer.open({
skin: 'to-fix-select',
type:1,
title:"添加信息",
area: ['75%','75%'],
content:$("#add_info_form").html(),
success:function(layero, index){
var iFrameWindow=layero.find('iFrame');
form.render();
}
});



form.on('select(type_one)',function(data){
$.ajaxSettings.async = true;
$('#type_two').html("");
var typeTwoHtml='<dd lay-value="">下拉菜单</dd>';
//$("#type_two").html("<select id='type_two'><option value=''>下拉菜单123</option></select>");
//$("#type_two").html(typeTwoHtml);
$('#type_three').empty();
$('#type_three').html("");
var typeThreeHtml='<option value="">下拉菜单456</option>';
$('#type_three').html(typeThreeHtml);
$('#type_three').html("Hello");
//typeOneText=data.text;
var value=data.value;
console.log("value="+value);
$.ajaxSettings.async = false;
$.get("/tree/type",{"parent":value},function(data,status){
if(status!="success"){
layer.msg("请求错误")
}else{
var $html="";
if(data.data!=null){
$.each(data.data,function(index,item){
$html+="<option value="+item.id+">"+item.name+"</option>";
console.log($html);
//$('#type_two').append('<option value="+item.id+">"+item.name+"</option>');
});
}
$("#type_two").append($html);//
}
});
form.render();
form.render('select');
form.render('select','type_two');
$.ajaxSettings.async = true;
});
});
}
回帖
  • @盆盆诶 那就要考虑另外一个问题了,因为你设置了一个隐藏的div用来放弹窗的内容,那么你弹窗的content是怎么写的,是$(#某id).html();还是直接用$(#某id)这个形式,关键的问题就是你$("#type_two").append($html);这句代码前面找到的节点是否是你要加进去的那个节点,如果出现id重复的节点,那么它遍历只能找到第一个,很可能就不是你想要修改的节点,可以在弹出之后控制台打印一下去遍历一下,然后看看找到的节点是否就是弹窗中你要修改的。
    0 回复
  • 因为你get是一个异步的请求,应当把form.render放在success回调中去,在节点append之后执行一下form.render
    0 回复
  • 皓卝月
    2020-4-2
    把get请求改成同步的
    0 回复
  • 盆盆诶
    2020-4-2
    @岁月小偷
    我的请求是同步的,在每次get请求之前都执行了 $.ajaxSettings.async = false呀
    0 回复
  • 盆盆诶
    2020-4-2
    @皓卝月 我的请求已经是同步的了,每次get前都执行了 $.ajaxSettings.async = false
    0 回复
  • 盆盆诶
    2020-4-2
    @岁月小偷 还有我想不通一个问题,就是我在测试的时候我把form.on('type_one')后面代码全部删除,只留下$('#type_two').html(""),或者$('#type_two').empty,可是它都不执行,弹出层中显示的还是原来已经写好的option
    0 回复
  • 盆盆诶
    2020-4-2
    1.我弹窗的写法是这样的 content:$("#add_info_form").html(),在我给出的代码中的layer.open有写到。
    不过加不加html()会有什么影响吗?

    2.我用sublime查找了type_two,具有这个id值的只有我隐藏的div中的select
    0 回复
  • 盆盆诶
    2020-4-2
    @岁月小偷 太感谢你了!!!是你提到的$(#某id).html();还是直接用$(#某id)这个形式这个问题
    是因为如果直接加载.html()的话,他就变成类似于静态页面这种方式存在,所以之后无法刷新吗?

    太感谢了!!!要不是你我的实习进度会被拖太久了!!!
    0 回复
  • @盆盆诶 客气了,如果用$('').html()这种形式,那么一般来说建议你把模板存放的节点可以改成<script type="text/html"></script>而不是div,div设置不可见,实际上内部的节点还是会被DOM树解析,script里面去放html的就不会,这样子就能够解决里面这个id是唯一的,不会在弹出的时候有重复的id;另外一个就是如何遍历的问题,你用$(某id),那么它其实会整个DOM树遍历,如果你更加精准的去遍历,那么即使id有重复的,其实也能拿到你想要的id,比如你是在1级下拉想要去更新2级的,那么实际他们一般是处于某一个div下,所以你可以先限定一下在当前的form去找,当前的form又可以通过你进入是个select的监听的下拉节点去找到,
    form.on('select(type_one)',function(data){
    ......
    var formElem = $(data.elem).closest('form');
    formElem.find('#type_two').html(......);
    form.render('select', formElem.attr('lay-filter'));
    });
    0 回复
  • 盆盆诶
    2020-4-2
    @岁月小偷 学到了学到了 !我实习之前接触的前端比较少,做的比较多的是web,就掌握一下基本的语法什么的就差不多了。这次实习就交给我前后端的任务,所以前端的东西都是一点点摸索出来的,没有较为系统的学过。还是很感谢你的!
    0 回复