精华内容
下载资源
问答
  • layui 动态加载 select

    2021-01-18 18:13:47
    layui ajax select 动态添加数据方法,给我指明了前进的方向。 首先,这是一个学习的过程,并不是最优方案。只是“玩索而有得”而己。 做了一个联动的搜索框,本来一开始想用layuiselect第三方插件,但后来没有成功...

    感谢小张帅三代以及他的好文
    layui ajax select 动态添加数据方法,给我指明了前进的方向。
    首先,这是一个学习的过程,并不是最优方案。只是“玩索而有得”而己。
    做了一个联动的搜索框,本来一开始想用layuiselect第三方插件,但后来没有成功,或者是说没有实现自己想要的目的。就利用layui现成的一套东东做了一下。按钮及功能如下:
    1.年:点击“年”,“商品类别”随刷新并指向第一个“全部数据”,数据表随刷新;
    2.商品类别:点击“商品类别”,“年”不动,数据表随刷新;
    3.搜索文字框:点“搜索文字框”,自动根据“年”和“商品类别”匹配数据库相关内容,也是ajax系列;
    4.搜索:点“搜索”,根据前面3个框的内容做综合查询,并刷新列表;
    5.重置:点“重置”,回到页面初始状态,并且不刷新页面,但刷新列表。

    下面贴出三段代码
    这是html

    <div class="layui-form layui-inline layui-col-md6 "  lay-filter="form_whereyear">
    	<select name="whereyear" id="whereyear" lay-filter="whereyear" >
    	</select>
    </div>
    

    这是JS:

     loadSelect_whereyear:function (doctype,whereyear){
            var form=layui.form;
            var option = "<option value=''>所有年份</option>";//初始化option的选项
            $.ajax({
                url: "/index/docnumberajax/select_whereyear",
                type: 'POST',
                data:'doctype='+doctype
            })
                .done(function(datas) {
                    for(var i=0;i<datas.length;i++){
                        var year=datas[i]['name'];
                        //name是从后台提取的字段;
                        if (year!= whereyear){
                            option+="<option value='"+datas[i]['name']+"'>"+datas[i]['name']+"</option>";//拼接option中的内容
                            $("#whereyear").html(option);//将option的拼接内容加入select中,注意选择器是select的ID
                        }
                        else{
                            option+="<option selected='selected' value='"+datas[i]['name']+"'>"+datas[i]['name']+"</option>";//拼接option中的内容
                            $("#whereyear").html(option);//将option的拼接内容加入select中,注意选择器是select的ID
                        }
    
                    }
                    form.render('select','form_whereyear');//重点:重新渲染select
                })
                .fail(function() {
                    console.log("error");
                });
    
    
        },
    

    这是后台:

        public function select_whereyear(){
            $account = session('adminAccount');
            $usereditor = $account['username'];
            $doctype=input('doctype');
            $where[] = [
                ['a.doctype', '=', $doctype],//这个是文件类型转换1为一种文件,2为另一种文件
                ['a.status','=',1],
            ];
            $docyearData = Db::name('docnumber')->
            alias('a')->
            field(' a.doc_year as name')->
            whereOr('editor|applicant', '=', $usereditor)->
            where($where)->
            order('a.doc_year', 'ASC')->
            group('a.doc_year')->
            select();
    		return json($docyearData);
        }
    
    展开全文
  • <p>layui动态加载select 加载不出来,后台接口没问题,是能取到数据的,但是赋值却上不去 <p style="text-align:center"><img alt="" src=...
  • layui 动态加载select并option选中但没有赋值 var select='dd[lay-value='+data.code+']'; $("#code").siblings("div .layui-form-select").find('dl').find(select).click();

    layui 动态加载select并option选中但没有赋值

     var select='dd[lay-value='+data.code+']';
      $("#code").siblings("div .layui-form-select").find('dl').find(select).click();
    
    展开全文
  • 下面小编就为大家分享一篇layui select动态添加option的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui动态渲染生成select的option值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 思路 手动拼接option,然后使用form.render()...加载数据前禁用select并显示“加载中...”,加载完成(异步)后取消禁用select,并重新渲染。 代码 showAddLayer(); // 显示添加用户弹出层 function show...

     思路

    手动拼接option,然后使用form.render()重新渲染。加载数据前禁用select并显示“加载中...”,加载完成(异步)后取消禁用select,并重新渲染。

    代码

      showAddLayer();
      // 显示添加用户弹出层
      function showAddLayer() {
        resetForm("#form-add-user");
        loadUnitList();// 加载单位select
        loadRoleList();// 加载角色select
        // 添加用户弹出层配置
        layui.use('layer', function() {
          layer.open({
            type : 1,
            title : '添加用户',
            shadeClose : false, //点击遮罩关闭层
            //area : [ '50%', '80%' ],//弹出层大小
            area : '678px',//只定义宽度
            content : $('#layer-add-user'),
            //btn : "关闭",
            anim : 0,
            resize : false
          });
        });
      }
    
      // 加载所有单位列表(学院、职能部门、其他)
      function loadUnitList() {
        var departmentList = [];
        var collegeList = [];
        //加载部门列表
        $.ajax({
          url : "department/all",
          beforeSend : function() {
            // 禁用下拉框并显示加载中
            $("#form-add-user select[name=unitId]").attr("disabled", "disabled");
            $("#form-add-user select[name=unitId] option:first").html("加载中...");
          },
          success : function(res) {
            departmentList = res.data.listDepartment;
            // 加载学院列表
            $.ajax({
              url : "college/all",
              success : function(res) {
                collegeList = res.data.listColleges;
                createOptions(departmentList, collegeList);
              },
              error : function(res) {
                console.log(res);
              },
              complete : function() {
                $("#form-add-user select[name=unitId]").removeAttr("disabled");
                $("#form-add-user select[name=unitId] option:first").html("");
                // 重新渲染select
                layui.use("form", function() {
                  var form = layui.form;
                  form.render("select");
                });
              }
            });
          },
          error : function(res) {
            console.log(res);
          },
        });
      }
    
      // 拼接option
      function createOptions(departmentList, collegeList) {
        var options = "";
        var $unit = $("#form-add-user select[name=unitId]");
        $unit.empty();// 清空子节点
        // 拼接options
        options += '<option value="">请选择</option>';
        options += '<optgroup label="职能部门">';
        for ( var index in departmentList) {
          options += '<option value="2-'+departmentList[index].id+'">' + departmentList[index].name + '</option>';
        }
        options += '</optgroup>';
        options += '<optgroup label="学院">';
        for ( var index in collegeList) {
          options += '<option value="1-'+collegeList[index].id+'">' + collegeList[index].name + '</option>';
        }
        options += '</optgroup>';
        options += '<optgroup label="其他">';
        options += '<option value="3">其他(可在备注写明)</option>';
        options += '</optgroup>';
    
        // 将options添加到dom树中
        $unit.append(options);
      }
    
      //加载所有角色列表
      function loadRoleList() {
        var mData = [];
        $.ajax({
          url : "role/all",
          beforeSend : function() {
            // 禁用下拉框并显示加载中
            $("#form-add-user select[name=roleIds]").attr("disabled", "disabled");
            $("#form-add-user select[name=roleIds] > option").html("加载中...");
          },
          success : function(res) {
            sort(0, res.data.listRole);
            // 加载角色下拉框数据
            layui.use("formSelects", function() {
              var formSelects = layui.formSelects;
              formSelects.data("select-roleIds", "local", {
                arr : mData
              });
            });
          },
          error : function(res) {
            console.log(res);
          },
          complete : function() {
            // 取消禁用下拉框
            $("#form-add-user select[name=roleIds]").removeAttr("disabled");
            $("#form-add-user select[name=roleIds] > option").html("");
          }
        });

    效果

    将谷歌浏览器【network】调成【slow 3G】查看效果

    转载于:https://my.oschina.net/saw992781/blog/1928803

    展开全文
  • 今天小编就为大家分享一篇layui-select动态选中值的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • class="layui-form-item"影响的,只不过去掉的话格式不统一了。 只需要: 在ajax请求success中或者弹出框的success中加上:form.render(“select”),重新渲染select即可

    class="layui-form-item"影响的,只不过去掉的话格式不统一了。
    只需要:
    在ajax请求success中或者弹出框的success中加上:form.render(“select”),重新渲染select即可
    在这里插入图片描述

    展开全文
  • layui ajax动态加载渲染select下拉框

    千次阅读 2019-12-27 18:58:08
    <div class="layui-inline"> <div class="layui-input-inline"> <select name="label" id="catalog"> <option value="">专业分类</option> ...
  • 这里指的是通过layui官方示例中的方式写的select,如下: <div class="layui-form-item"> <label class="layui-form-label">下拉选择框</label> <div class="layui-input-block"> <...
  • 今天小编就为大家分享一篇vue+layui实现select动态加载后台数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 页面效果 场景: 比如使用layui.table数据表格显示了所有项目数据,客户数据对应另外的表数据集合,现在需要修改客户名称,需要把数据回显到表单中,然后进行修改 实现 <div class="layui-form-...select name=
  • layui-form-item"&gt; &lt;label class="layui-form-label"&gt;执行周期&lt;/label&gt; &lt;div class="layui-input-inline" style="width: 90px;"&...
  • 对于动态插入select ,form 模块的自动化渲染是失效的,需要执行 form.render(type, filter); 第一个参数:type,为表单的 type 类型 第二个参数:filter,为 class="layui-form" 所在元素的 lay-filter="" 的值。...
  • Layuiselect 框的数据动态加载

    千次阅读 2019-10-11 11:03:15
    html代码 <div style="width: 300px"> <select name="deviceid" id="deviceid" lay-verify="required" lay-filter="xmFilter"> <option value="">先选择类型</opti...
  • layui 动态添加的表单元素--select

    万次阅读 2018-09-04 16:47:30
    layui使用的时候select下拉框没有样式 这个地方绝对是待提升的地方 1.首先说一下为什么会出现这种情况 官方解释 有些时候,你的有些表单元素可能是动态插入的。这时形式模块的自动化渲染是会对其失效的。虽然...
  • 不知道有没有人入了layer的坑,关于它的动态加载select和单选复选框的。原来layer为了让样式更漂亮,所以它隐藏了原先的样式,自己动态生成了一个新的样式。。所以通过异步得到的新节点添加完以后要form.render(...
  • layuiselect选项动态加载重新渲染方法 代码如下: function renderSelect(data){ var html = '<option value="">分诊类目</option>' for (var i = 0; i < data.length; i++) { html += '<...
  • layui.form.render('select'); }); } 初始化的代码 layui.use(['form'], function () { var form = layui.form; layui.form.render('select'); });
  • 上班没时间写,先放下代码。有空了更新。 JS部分 <script> $(document).ready(function(){ timer(); var form,layedit,layer... layui.use(['form', 'layedit','layer','laydate'], function(){ ...
  • layui 动态添加select不显示

    千次阅读 2019-03-22 16:29:12
    需要render 一下,重新渲染 $("#add").click(function() { $("#famliy-table").append(tr); form.render('select') deleteTr() }) https://www.layui.com/doc/modules/form.html ...
  • layui ajax select 动态添加数据方法

    千次阅读 2019-01-07 02:01:10
    <form class="layui-form" action="" method="post"> <div class="layui-form-item"> <label class="layui-form-label">选择类型</label> <div class="layu...
  • 一、问题:利用jQuery动态添加的代码中包含select,运行后不显示 1、显示的状态 2、后台的代码 正常情况下应该像队长班级一样显示,但是却惊奇的发现,事与愿违 二、原因 Layui会对select、checkbox、radio等原始...
  • 对于一些功能,比如商品添加页面有两个下拉框,先选择一级分类,再选择二级分类,需要二级分类根据选择的一级分类动态加载出来。 三部分代码 html <div class="layui-form-item"> <label class=...
  • 今天小编就为大家分享一篇layui动态绑定事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用layui前端框架时,在使用ajax为select动态添加option时,会出现option内容不显示的问题 解决方案: —&amp;gt; 执行 form.render(type,filter) 方法 具体代码: $(function(){ // 异步加载菜品种类...
  • LayUIselect动态赋值的显示问题

    千次阅读 2019-09-18 10:51:26
    问题:昨天是解决了select的监听事件,以为问题就解决了,开始动态赋值,结果问题就来了,用异步加载数据,赋值,按照常理是没有问题,可是在layui中是有问题的,数据加载时正常的,只是显示不出来,可能是layui的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,459
精华内容 983
关键字:

layui动态加载select