精华内容
下载资源
问答
  • 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);
        }
    
    展开全文
  • 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,如下: <div class="layui-form-item"> <label class="layui-form-label">下拉选择框</label> <div class="layui-input-block"> <...

    描述

    这里指的是通过layui官方示例中的方式写的select,如下:

    <div class="layui-form-item">
        <label class="layui-form-label">下拉选择框</label>
        <div class="layui-input-block">
        <select name="interest" lay-filter="aihao">
            <option value="0">写作</option>
            <option value="1">阅读</option>
        </select>
        </div>
    </div>

    试了一下是class="layui-form-item"影响的,只不过去掉的话格式不统一了。

    解决

    在ajax请求success中或者弹出框的success中加上:form.render("select"),重新渲染select即可

    success: function(data) {
            var funList = data.funList;
            for (var i = 0; i < funList.length; i++) {
                $("#functionCode").append((new Option(funList[i].functionCode + " " + funList[i].functionName, funList[i].functionCode)));
                form.render('select'); //刷新select选择框渲染
    
            }
        }

     

    layer.open({
    	type: 1,
    	title: '新增用户',
    	area: ['700px', '500px'],
    	content: $("#add-main"),
    	success: function(layero, index){
    		form.render('select'); //刷新select选择框渲染
    
    	}
    })

    如何动态获取下拉选项,见 https://blog.csdn.net/qq_24484911/article/details/94136311

     

    展开全文
  • 思路 手动拼接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标签中,请求接口里面的返回的json数据明明已经赋值给了select标签 但是无法显示。 因为在layui中所有的组件都是声明使用 ,你表面上看了是一个select类型的显示类型但是并不是。需要手动声明吧数据...
  • 用到知识点表单监听 form.on局部表单渲染 form.render动态加载select表单 必须有默认的option项(第一个option) 要不然layui 不会渲染出 select 组件代码如下:添加数据  返回列表//查找所有的助理 5 是助理$...
  • 一、问题:利用jQuery动态添加的代码中包含select,运行后不显示 1、显示的状态 2、后台的代码 正常情况下应该像队长班级一样显示,但是却惊奇的发现,事与愿违 二、原因 Layui会对select、checkbox、radio等原始...
  • 对于一些功能,比如商品添加页面有两个下拉框,先选择一级分类,再选择二级分类,需要二级分类根据选择的一级分类动态加载出来。 三部分代码 html <div class="layui-form-item"> <label class=...
  • Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖element...
  • Vue.js+layui实现select动态加载后台数据的例子发布于 2020-6-2|复制链接分享一篇关于vue+layui实现select动态加载后台数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小妖过来看看吧刚开始由于layui...
  • vue+layui实现select动态加载后台数据的例子发布时间:2020-09-18 22:51:36来源:脚本之家阅读:85作者:qq_26814945刚开始由于layui form渲染与vue渲染有时间差 有时会导致 select里面是空白的后来就想办法 等vue...
  • 使用layui前端框架时,在使用ajax为select动态添加option时,会出现option内容不显示的问题 解决方案: —&amp;gt; 执行 form.render(type,filter) 方法 具体代码: $(function(){ // 异步加载菜品种类...
  • 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> ...
  • {{ option.name }}var vue = new Vue({el: '#demo',data: {option: {},options: []},created: function () {this.send...},updated: function () {layui.form.render('select','test2');console.log(layui.form);},m...
  • 今天小编就为大家分享一篇vue+layui实现select动态加载后台数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue+layui实现select动态加载后台数据

    万次阅读 2018-08-24 15:15:40
    刚开始由于layui form渲染与vue渲染有时间差 有时会导致 select里面是空白的 后来就想办法 等vue数据渲染完 再渲染layui form 试过模块化导入layui form组件 然后等vue数据渲染完后手动进行渲染 这种方式有一...
  • layuiselect选项动态加载重新渲染方法 代码如下: function renderSelect(data){ var html = '<option value="">分诊类目</option>' for (var i = 0; i < data.length; i++) { html += '<...
  • layuiselect 若已经给了选项的数据,它还会动态生成另外一段代码: <dl class="layui-anim layui-anim-upbit"/> 想自己添加动态的数据,则我们也需要添加: <dl class="layui-anim layui-anim-upbit"/&...
  • layui+vue实现select动态加载后台数据

    千次阅读 2019-01-25 17:35:32
    layui动态渲染之后,需要 layui.form.render(); 重新渲染一次数据 //页面代码 &lt;select name="Classification" lay-verify="Classification" class="selector"&gt; &...
  • 上班没时间写,先放下代码。有空了更新。 JS部分 <script> $(document).ready(function(){ timer(); var form,layedit,layer... layui.use(['form', 'layedit','layer','laydate'], function(){ ...
  • 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...

空空如也

空空如也

1 2 3 4
收藏数 75
精华内容 30
关键字:

layui动态加载select