layui动态插入选择框到下拉框上

 我需要从后台发起请求获取有哪些父目录,再将数据填充到下拉框上去。 

html上的代码:

在select标签上添加id为pid

 js的代码:

  $.ajax('http://localhost:6630/api/tag-info/parentTagAll/', {
                        method: 'GET',
                        contentType: 'application/json',
                        success:function (result) {
                           var data=result.data;
                           var str="";
                           for(var i=0;i<data.length;i++){
                                if(i==0){
                                    str+="<option selected value=\""+data[i].id+"\">"+data[i].title+"</option>";
                                }
                                 else{
                                    str+="<option value=\""+data[i].id+"\">"+data[i].title+"</option>";
                                 }   
                           }
                            $("#pid").html(str)
                            form.render('select');
                        },
                        error:function (err) {
                            console.log(err);
                            layer.msg("机器繁忙,稍后再试");
                            layer.close(index);
                        }
                    })

 核心代码在成功的回调函数,通过循环从后台获取的数据,进行拼接<option>标签,如果i为0即开始循环的时候,将这个标签设置为selected为默认选中使用$("#pid").html(str)将数据填充到下拉框上,再使用 form.render('select');重新渲染下拉框。

 后台代码:

获取字段layer为1的数据,返回给前端。 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui是一种基于layui架的前端UI库,可以方便地在网页中创建动态表格和下拉框等组件。 使用Layui动态表格带搜索的下拉框,首先需要引入LayUI的相关文件,如layui.css、layui.js等。然后,在HTML中定义一个表格容器,可以使用div标签,并给它一个id,方便后续的操作。 接下来,在JavaScript中通过Layui的table模块进行表格的初始化和渲染。我们可以使用table.render()方法,传入一些参数来定义表格的样式、列属性以及数据源等。在其中的cols配置项中,我们可以定义表格的列,包括列头名称、字段名、宽度等信息。此时,我们可以在列的属性中增加一个toolbar属性,来定义表格的工具栏。 其中的toolbar可以是一个函数,用于渲染每一行的工具栏内容。我们可以在这个函数中创建一个下拉框,通过Layui的form模块进行渲染和监听。我们可以使用form.on()方法来监听下拉框的选中事件,并在监听函数中处理相应的逻辑。 在表格中,我们可以使用formSelects组件,它是一个基于Layui的多选、搜索等功能的下拉框插件。我们可以通过定义一个元素的class为select,然后使用formSelects.render()方法来渲染下拉框。可以定义一些参数,例如最多可选的数量、搜索的位置等。 总结来说,要使用Layui动态表格带搜索的下拉框,我们需要引入Layui的相关文件,然后在HTML中定义表格容器,并在JavaScript中使用Layui的table模块进行表格的初始化和渲染。在列属性中,我们可以添加一个toolbar属性来定义行的工具栏。可以使用form.on()方法监听下拉框的选中事件,并在监听函数中处理逻辑。同时,也可以使用formSelects组件来实现多选、搜索等功能的下拉框。通过这些步骤,我们可以方便地实现Layui动态表格带搜索的下拉框的使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值