精华内容
下载资源
问答
  • *技术职称初级中级副高级正高级》》》》》》》》》》》》分割线》》》》》》》》》》》》》》》》》》》》》》》》layui.use(['form','layer'], function(){$ = layui.jquery;var form = layui.form,layer = layui.....

    修改的值可以提交给后台,但是后台到前端显示的时候 总是显示选择框的第一个值,跪求怎么解决???????????

    *技术职称

    初级

    中级

    副高级

    正高级

    》》》》》》》》》》》》分割线》》》》》》》》》》》》》》》》》》》》》》》》

    layui.use(['form','layer'], function(){

    $ = layui.jquery;

    var form = layui.form

    ,layer = layui.layer;

    $(":radio[name='gender'][value='"+${pro.gender}+"']").attr("checked",true);

    $("#workStatus").find('option[value="'+${pro.workStatus}+'"]').attr("selected",true);

    $("#education").find('option[value="'+${pro.education}+'"]').attr("selected",true);

    $("#administrative").find('option[value="'+${pro.administrative}+'"]').attr("selected",true);

    $("#technicalPost").find('option[value="'+${pro.technicalPost}+'"]').attr("selected",true);

    form.render();

    });

    展开全文
  • 前言在用Layui写后台管理页面的时候,有的时候查询的下拉框是需要动态从数据库获取,当用户修改了数据库数据的时候,可以动态的生成最新的下拉框选项。页面垃圾名称:全部js写法layui.use(['form', 'table', ...

    前言

    在用Layui写后台管理页面的时候,有的时候查询的下拉框是需要动态从数据库获取,当用户修改了数据库数据的时候,可以动态的生成最新的下拉框选项。

    页面

    垃圾名称:

    全部

    js写法

    layui.use(['form', 'table', "laydate", 'layer'], function () {

    var form = layui.form;

    var table = layui.table;

    var layer = layui.layer;

    //重点在这里, 获取后台数据, 再拼装, 最后记得form.render

    $.ajax({

    url: '/refuse-web/admin/getRefuseName',

    dataType: 'json',

    type: 'get',

    success: function (data) {

    let str="全部";

    for(let i of data){

    str+=`${i.name}`;

    }

    $("#refusename").html(str);

    form.render();

    //重新渲染 固定写法

    }

    });

    }

    总结

    这种写法非常适合动态获取类型表这种表数据,作为条件筛选,这种写法不一定是要Layui才能实现,前端框架也可以变通的使用。

    展开全文
  • script src="../../lib/layui-v2.5.5/layui.js" th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script> <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.c...

    1.导入必要的文件

    <script src="../../lib/layui-v2.5.5/layui.js" th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
     <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">
    
     <link rel="stylesheet" href="" th:href="@{/lib/formSelects/formSelects-v4.css}">
     <script src="" th:src="@{/lib/formSelects/formSelects-v4.js}" charset="utf-8"></script>
    

    下拉框模块

     <div class="layui-form-item">
            <label class="layui-form-label">安排科目</label>
            <div class="layui-input-block">
                <select name="roleId" xm-select="roleId" lay-verify="required">
    
                </select>
            </div>
        </div>
    

    2.获取数据并加载

     $.ajax({
                    type: 'post',
                    url: '[[@{/}]]system/selCsData',
                    data: parent_json,
                    success: function (data) {
                        console.log(data)
                        var courses=data.courses;
                        var cs=data.cs;
                        // 渲染多选下拉框
                        var roleSelectData = new Array();
                        for (var i = 0; i < courses.length; i++) {
                            //固定样式
                            roleSelectData.push({name: courses[i].sName, value: courses[i].sId});
                        }
                        //本地加载模式local
                        layui.formSelects.data('roleId', 'local', {arr: roleSelectData});
    
    
    
                        //获取对象列表的某个属性生成数组
                        var result = cs.map(function(item) {
                            return item.sId;
                        });
                        // 选中value为result中的option
                        layui.formSelects.value('roleId', result);       
    
                    }
                });
    

    3.效果

    在这里插入图片描述

    展开全文
  • 下拉框正常加载了,但是没有默认选项,这是layui的一个大坑之处,本来我使用的一种复杂的方法也可以实现赋值,但是我还是使用了layui默认赋值,写的麻烦但是简单易懂 通过thymeleaf的判断方法加载不同的代码,可以实现 ...

    项目中使用layui,也使用了thymeleaf动态模板
    在做编辑时,thymeleaf动态加载数据,input框可以正常显示,下拉框却不能正常显示
    于是我用了下面的代码

    form.render('select');
    或者
    form.render();  
    

    下拉框正常加载了,但是没有默认选项,这是layui的一个大坑之处,本来我使用的一种复杂的方法也可以实现赋值,但是我还是使用了layui默认赋值,写的麻烦但是简单易懂

    layui下拉配合thymeleaf
    通过thymeleaf的判断方法加载不同的代码,可以实现

    水平有限,如果有更好的方法请告知
    ajax之类的动态赋值就不必了,因为我这个情况比较特殊,是后台传过来的集合遍历出来的,数据较多不好区分

    展开全文
  • layui的select 若已经给了选项的数据,它还会动态生成另外一段代码: <dl class="layui-anim layui-anim-upbit"/> 想自己添加动态的数据,则我们也需要添加: <dl class="layui-anim layui-anim-upbit"/&...
  • 下拉框生成 var option='<option value="">请选择部门名称</option>'; $.ajax({ type: "post", url: "Dept/getAllJkDepartment", dataType: 'json', ...
  • 在select中记得添加一个id属性。1-1.博主是使用C#的webapi从后台获得数据。2.【JS】中的代码。在js中写一个方式,将获取到的...//获取商品的【状态信息】,绑定到Select下拉框上functionGetAudit_status(element, u...
  • 在select中记得添加一个id属性。1-1.博主是使用C#的webapi从后台获得数据。2.【JS】中的代码。在js中写一个方法,将获取到的...//获取商品的【状态信息】,绑定到Select下拉框上functionGetAudit_status(element, u...
  • 思路:根据layui数据表格中 templet属性中的LAY_INDEX字段动态生成下拉框的class,在渲染表格的时候发送请求,根据select.class操纵dom将接口返回数据填充到select下拉框中。 数据表格: var n = { title: '变更后...
  • Layui动态生成下拉框

    千次阅读 2020-04-26 15:11:30
    在写后台管理页面的时候,经常需要有下拉框搜索功能,比如说数据库有一张类型表,那么这个时候的下拉框选项是需要根据表的数据一致的,当用户修改了数据库数据的时候,下拉框选项也需要动态的改变。 Layui框架...
  • 表单下拉框动态获取数据

    千次阅读 2018-09-22 22:37:30
    1.在进行表单操作时,下拉框选项需要动态读取数据库数据,使用ajax异步获取数据。 &lt;form class="layui-form layui-form-pane" method="post" id="websiteform"&gt; &...
  • 原贴地址:...可以改写成ajax动态获取,这里是写死了几个选项,做个示例,怎么样动态生成下拉框,复选框,单选框,并默认选中 在编辑,查看页面我们经常需要这么做。 1.html 代码如下: <for...
  • 设置了select的val值,但是select显示的当前选中项依然是默认空选项。 用layui.form.render('select')重新渲染;才能更新select的选中项。 $("").attr("checked", true); 用layui.form.render()重新渲染;才能更新...
  • layui 动态添加多选checkbo选项 动态选项 js 赋值之后,需要重新加载才能出现 重新加载 form.render('checkbox');//刷新值 其它表单元素: 下拉框:form.render('select');   其它元素: 折叠面板...
  • 使用layui监听器监听select下拉框,事件绑定不成功

    万次阅读 多人点赞 2018-08-24 13:15:09
    且使用layui动态添加option时,必须要进行渲染(form.render()),否则选项追加不上 这样做完之后如果还不能获取select所选的value,那就需要检查一下select所在的form表单有没有写class属性,如果没有写class属性...
  • 本想随便写个select下拉框,但样式太不美观,重写样式也比较麻烦,还是使用layUI自带的吧。效果如下 这里强调一下,引用layUI自带的select 需要引入layui-form类,否则样式引用不上。 对于select的option选项...
  • 类似于淘宝可以多选筛选条件,同一筛选条件如果选项过多可以设置一个“更多”按钮,超过一行的数据会隐藏掉,时间筛选可以进行联动(下拉框样式稍作改动)。效果如下图: 1.主图 2.时间联动 3.选中条件,下方...

空空如也

空空如也

1 2
收藏数 22
精华内容 8
关键字:

layui下拉框动态选项