layui select重新渲染

说明文档也不知道去哪里找,记录一下

js代码:

javascript 复制代码
<script>
   layui.use(['form'], function(){
        var form = layui.form;

        // 监听select变化
        form.on('select(class_id)', function(data){
          var id=data.value; // data.value即为当前选中的值
          // 在这里编写你的代码
          //发异步,把数据提交给php
          $.ajax({
              type: "POST", //用POST方式传输       
              url: 'sel_classid', //目标地址.
              dataType: "json", //数据格式:JSON
              data: {classid : id},//传输数据
              success: function (data) {
                  if (data.code == 200) {
                      var html='<option value="0">无</option>';//需要替换的选项
                      var $ = layui.jquery;
                      $(data.list).each(function(th,val){
                          html+='<option value="'+val.id+'">'+val.card_name+'</option>';
                      })
                      $('#card_class_id').html(html);
                      form.render('select');//重新渲染
                  } else {
                      layer.msg(data.msg, {icon: -1, time: 1500, shade: 0.1});
                  }
              }
          });
        });
    });
</script>

页面代码:

html 复制代码
            <div class="layui-form-item">
                <label for="L_pass" class="layui-form-label">
                    <span class="x-red">*</span>名称
                </label>
                <div class="layui-input-inline">
                    <select name='card_class_id' id='card_class_id' lay-filter="card_class_id">
                        <option value='0'>无</option>
                    </select>
                </div>
            </div>

重点:

1.select 标签里 lay-filter 属性

2.form.render('select');//重新渲染

3.其他就和正常操作DOM一样

4.var $ = layui.jquery;//这样和操作jQuery 一样

相关推荐
ZC跨境爬虫9 小时前
跟着 MDN 学JavaScript day_5:技能测试——变量实战
java·开发语言·前端·javascript
pan_junbiao9 小时前
Whistle 抓包工具的安装与使用
前端·测试工具·压力测试·抓包
Cory.眼9 小时前
前端调用后端接口全流程实战
前端·调用接口
牛栓柱9 小时前
【后端实战】用 Supabase + React/TS 零成本构建高并发 Multi-Agent 服务
前端·数据库·人工智能·后端·react.js·前端框架
木斯佳9 小时前
前端八股文面经大全:百度-Agent部门-前端一面(2026-06-04)·面经深度解析
前端
shmily麻瓜小菜鸡9 小时前
Bootstrap 4 常用工具类速查表
前端·javascript·bootstrap
CDN3609 小时前
【架构进阶】告别配置漂移!用 NodeNext + Workspace 打造优雅的 TypeScript Monorepo
前端·javascript·typescript
协享科技10 小时前
前端 SSE 流式响应处理实践:从接收、解析到渲染
前端·人工智能·程序人生·go·ai编程·sse
超人不会飞_Jay10 小时前
6.2前端笔记
前端·javascript·笔记
鹏大师运维10 小时前
统信UOS安装Subtitle Edit并使用Edge-TTS生成AI语音教程
linux·前端·人工智能·edge·麒麟·统信uos·ai语音