后端返回数据格式

axios方法执行成功后返回的数据格式如下图

前端下拉框

<div class="layui-form-item">
<label class="layui-form-label">年级</label>
<div class="layui-input-block">
<select name="gradeId" id="gradeId" lay-verify="required"></select>
</div>
</div>

前段js

axios({
url:"grade/list",
method:'get'
})
.then(response=> {
data = response.data.grades
let options = '<option value="">请选择年级</option>';
for (let obj of data) {
options += '<option value="' + obj.id + '">' + obj.name + '</option>'
}
$('#gradeId').append(options);
form.render('select');//处理动态赋值
}).catch(errors=>{
layui.msg(errors)
});

需要注意一点,后端拿到的数据要进行一个动态渲染之后,才会出现效果。

来自官方文档描述

更新渲染

有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。

虽然我们没有双向绑定机制(因为我们叫经典模块化框架) 但没有关系,你只需要执行 form.render(type, filter); 方法即可。

第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:

参数(type)值 描述
select 刷新select选择框渲染
checkbox 刷新checkbox复选框(含开关)渲染
radio 刷新radio单选框框渲染
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
//……

第二个参数:filter,为 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助该参数,对表单完成局部更新。

【HTML】
<div class="layui-form" lay-filter="test1">

</div> <div class="layui-form" lay-filter="test2">

</div> 【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
//……

参考链接:

https://www.cnblogs.com/ovim/p/13171097.html

https://www.layui.com/doc/modules/form.html

layui框架下如何给select的option选项赋值的更多相关文章

  1. 下拉框select中option居中样式

    下拉框select中option居中样式 text-align:center;text-align-last:center;

  2. layui框架下的摸索与学习

    一.table表格内的查询  1.单个条件查询: 主要代码: <%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/1/14 ...

  3. layui中当悬浮在select的option上面是给不同的提示;

    $(document).on('mouseenter', '#paramsFather .layui-form-selected dl dd', function () { var data = $( ...

  4. ios高版本中select的option选项内容不显示问题

    <select class="form-control" @change="inputChange(item.id,postObj[item.id])" ...

  5. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  6. JQuery操作下拉框 select

    要实现这种效果: html代码 1<script src="js/jquery-1.7.2.min.js"></script> 2 <table> ...

  7. jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)

    jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val();  //选择被选中Radio的Val ...

  8. 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】

    radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...

  9. 利用js给datalist或select动态添加option选项

    <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type=& ...

随机推荐

  1. 图像匹配 | NCC 归一化互相关损失 | 代码 + 讲解

    文章转载自:微信公众号「机器学习炼丹术」 作者:炼丹兄(已授权) 作者联系方式:微信cyx645016617(欢迎交流共同进步) 本次的内容主要讲解NCCNormalized cross-correl ...

  2. SpringBoot Shiro 权限注解不起作用

    最近在学习springboot结合shiro做权限管理时碰到一个问题. 问题如下: 我在userRealm中的doGetAuthorizationInfo方法中给用户添加了权限,然后在Controll ...

  3. PTA 中序输出度为2的结点

    6-10 中序输出度为2的结点 (10 分)   本题要求实现一个函数,按照中序遍历的顺序输出给定二叉树中度为2的结点. 函数接口定义: void InorderPrintNodes( BiTree ...

  4. Linux性能优化:内存使用情况分析

    Blog:博客园 个人 目录 什么是内存 Linux内存回收机制 查看Linux内存情况 查看/proc/meminfo 使用free命令查看 Buffer和Cache Swap 内存泄漏和内存溢出 ...

  5. 分享一次排查CLOSE_WAIT过多的经验

    关键词:TCP.CLOSE_WAIT 问题背景 某日下午有测试人员急匆匆的跑来跟我反馈:"有客户反馈供应商附件预览不了,流程阻塞,需要紧急处理",我立马精神起来,毕竟都是付费客户( ...

  6. HCL实验8:NAT搭建私有网络

    NAT 通过NAT技术,进行私有网络的搭建 拓扑图 先对路由器的端口进行配置 R1 [H3C]sys R1 [R1]INT G0/0 [R1-GigabitEthernet0/0]ip address ...

  7. 可视化运行Python的神器Jupyter Notebook

    目录 简介 Jupyter Notebook 启动notebook server notebook document 的结构 code cells markdown cells raw cells 以 ...

  8. MySQL数据库高级二:索引优化

    索引优化非常的重要 1.预热 java开发 DBA培训很少,需要经验磨练 索引优化的效果非常好 左外连接 MySQL没有全连接 7种join一定要会写 具体见武林的例子 union的字段顺序要相同 6 ...

  9. 一文带你更方便的控制 goroutine

    上一篇我们讲了 go-zero 中的并发工具包 core/syncx. 从整体分析来看,并发组件主要通过 channel + mutex 控制程序中协程之间沟通. Do not communicate ...

  10. 2. Mybatis Select

    mybatis select是mybatis 中最常用的元素之一. 对简单的查询,select 元素的配置是相当简单的: <?xml version="1.0" encodi ...