今天又踩了个坑,解决了layui的radio 切换的时候需要ajax调用接口在下方显示 一排radio 却不显示的问题。

需求:点击定级radio改变类型raio的列表值

 <div class="layui-form-item">
     <label class="layui-form-label"><span style="color:red">*</span>定级:</label>
      <div class="layui-input-block ml150" id="aevel">
          <input type="radio" name="evel" lay-filter="evelFilter" value="1" title="一般" checked/>
          <input type="radio" name="evel" lay-filter="evelFilter" value="2" title="较大"/>
          <input type="radio" name="evel" lay-filter="evelFilter" value="3" title="重大"/>
          <input type="radio" name="evel" lay-filter="evelFilter" value="4" title="特大"/>
      </div>
</div>

<!-- 点击定级raido改变 类型radio的列表值 -->
<div class="layui-form-item">
    <label class="layui-form-label"><span style="color:red">*</span>类型:</label>
    <div class="layui-input-block ml150" id="atype">
       <!-- <input type="radio" name="type" value="1" title="A" checked/>
            <input type="radio" name="type" value="2" title="B/>
            <input type="radio" name="type" value="3" title="C"/>
       -->
    </div>
</div>

//ruleArr是通过ajax获取到的数组对象
layui.use('form',function(){
  var form = layui.form;
  form.on('radio(evelFilter)',function(data){
    ruleArr.forEach(function(rItem){
       if(rItem.id==levelValue){
           var typeHtml = "";
           rItem.childrenList.filter(function(cItem){
              return cItem.type=='2';
           }).forEach(function(tem2){
              var radioItem = '<input type="radio" name="reportType" value="'+tem2.id+'" title="'+tem2.name+'" />';
              typeHtml += radioItem;
           });
           $("#atype").html(typeHtml);
        }
    });              
  });
});

html组合好的字符串已经放入id=”atype“元素的下面了,可radio就是不显示。

观察了好久,发现了:

又准备在html组合的地方加上这些代码,发现加上后,确实显示出来了,但是前面的radio圆形icon不能被选中。

查了 好久,最终解决了,也不用添加上图的layui-form-radio代码,直接在html组合后代码后添加一句 form.render();即可。

 

 

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐