精华内容
下载资源
问答
  • [LayUI]下拉框二级联动
    2022-03-07 15:36:05

    下拉框二级联动

    在某些应用场景我们需要用到下拉选择框联动情形。
    HTML:

                    <label class="layui-form-label">公司</label>
                    <div class="layui-input-inline
    更多相关内容
  • 本篇文章主要介绍了jquery基于layui实现二级联动下拉选择(省份城市选择),具有一定的实用价值,需要的朋友可以参考下
  • 主要为大家详细介绍了layui实现下拉框三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 基于layui开发的省市区三级联动下拉框,可以直接使用,还是很方便的
  • Layui实现二级联动及多级联动

    千次阅读 2019-09-10 09:13:38
    Layui超实用10篇技术解决方案:https://blog.csdn.net/libusi001/article/details/100065911 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...一、筛选代码 <form class="layui-form" action=""> <label c...

    Layui常用总结

    https://blog.csdn.net/libusi001/article/details/100065911

    一、筛选框代码

            <form class="layui-form" action="">
                <label class="layui-form-label">学校:</label>  
                <div class="layui-inline">
                    <select name="schoolId" lay-verify="required" lay-filter="schoolId" id="schoolId" lay-search>
                        <option value="">请选择学校</option>
                    </select>
                </div>
    
                专业:
                <div class="layui-inline">
                    <select name="zyId" lay-verify="required" lay-filter="zyId" id="zyId"
                            lay-search>
                        <option value="">请选择专业</option>
                    </select>
                </div>
    
                <button type="button" class="layui-btn" data-type="reload" id="search">搜索</button>
                <button type="reset" class="layui-btn">重置</button>
            </form>

    二、Ajax实现:监听companyId进行实现

    ctxPath = /*[[@{/}]]*/ '';
    
    layui.use(['element', 'form'], function () {
            var element = layui.element,
                form = layui.form;
    
            $(function () {
                $.ajax({
                    async: false,
                    type: "POST",
                    url: ctxPath + 'school/selectAll',
                    success: function (result) {
                        if (result.code === 0) {
                            var list = result.data;
                            var s = '<option value="">请选择学校</option>';
                            $.each(list, function (i, company) {
                                console.log(company.name);
                                s = s + '<option value="' + company.id + '">' + company.name + '</option>';
                            });
                            $("#schoolId").html(s);
                            form.render('select');
                        }
                    }
                });
            });
    
            form.on('select(schoolId)', function (data) {
                var companyId = data.value;
                var s = '<option value="">请选择专业</option>';
                if (companyId == '') {
                    $("#xyId").html(s);
                    form.render('select');
                } else {
                    $.ajax({
                        async: false,
                        type: "POST", //提交方式
                        url: ctxPath + 'xx/selectxxId',//路径
                        data: {
                            companyId: companyId
                        },
                        success: function (result) {
                            if (result.code === 0) {
                                var list = result.data;
                                $.each(list, function (i, ss) {
                                    s = s + '<option value="' + ss.id + '">' + ss.name + '</option>';
                                });
                                $("#xyId").html(s);
                                form.render('select');
                            }
                        }
                    });
                }
            });

    有用请点赞,养成良好习惯!

    疑问、交流、鼓励请留言!

     

    展开全文
  • layui二级联动 layui 第一个下拉框动态获取数据,选取第一个下拉框数据后,下一个下拉框根据前面选择的数据 后台动态 联动填充数据 HTML代码如下 <form class="layui-form" action=""> <div class="layui-...

    layui二级联动

    layui 第一个下拉框动态获取数据,选取第一个下拉框数据后,下一个下拉框根据前面选择的数据 后台动态 联动填充数据

    HTML代码如下

    <form class="layui-form" action="">
        <div class="layui-input-inline from-ses" style="width: 140px;">
          <select name="quiz1"id="quiz1"lay-filter="quiz1">
            <option value="">一级分类</option>
            <option value="灾害数据" >灾害数据</option>
            <option value="新能源">新能源</option>
          </select>
        </div>
        <div class="layui-input-inline from-ses">
          <select name="quiz2" id="quiz2">
            <option value="">二级分类</option>
            <option value="电网覆冰监测">电网覆冰监测</option>
            <option value="电网覆冰预测预警" >电网覆冰预测预警</option>
            <option value="电网舞动监测">电网舞动监测</option>
            <option value="电网舞动预测预警">电网舞动预测预警</option>
            <option value="电网山火检测">电网山火检测</option>
            <option value="电网山火预测预警">电网山火预测预警</option>
          </select>
        </div>
     </form>
    

    js代码如下

    layui.use('form', function(){
      var form = layui.form;
      $.ajax({
          url: "json/menu.json",
          type: "post",
          dataType: "json",
          success: function(datas) {
              datas=datas.menu;
              if(datas.length>0){
                  $("#quiz1").empty();
                  $("#quiz1").append("<option value=''>一级分类</option>");
                  for(var i=0;i<datas.length;i++){
                      var item=datas[i];
                      $("#quiz1").append("<option value="+item+">"+item+"</option>");
                  }
              }else {
                  $("#quiz1").empty();
                  $("#quiz1").append("<option value=''>一级分类</option>");
              }
              form.render("select");
          }
      });
        form.on('select(quiz1)', function(data){
            var value = data.value
            $.ajax({
                url: "json/menu2.json?va="+value,
                type: "post",
                dataType: "json",
                success: function(datas) {
                    datas=datas.menu;
                    if(datas.length>0){
                        $("#quiz2").empty();
                        $("#quiz2").append("<option value=''>更改后的select</option>");
                        for(var i=0;i<datas.length;i++){
                            var item=datas[i];
                            $("#quiz2").append("<option value="+item+">"+item+"</option>");
                        }
                    }else {
                        $("#quiz2").empty();
                        $("#quiz2").append("<option value=''>a</option>");
                    }
                    form.render("select");
                }
            });
        })
    
    
    })
    
    展开全文
  • layui中实现二级联动,有的时候二级联动不出来 给大家介绍两种方法 <tr> <td class="tds" >企业名称:</td> <td> <select name="enter_id" lay-filter="father_enter" > <...

    layui中实现二级联动,有的时候二级联动不出来

    给大家介绍两种方法

    <tr>
        <td class="tds" >企业名称:</td>
        <td>
            <select name="enter_id"   lay-filter="father_enter" >
                <option value="">请选择</option>
                {volist name="enterlist" id="vo"}
                   <option value="{$vo.id}">{$vo.enterprise}</option>
                {/volist}
    
            </select>
        </td>
        <td class="tds">子企业名:</td>
        <td>
            <select name="accout_type"  lay-verify="required"  id="child_enter" >
                <option value="">请选择</option>
            </select>
        </td>
    
    </tr>

    第一种:

    在layui中要使用select事件绑定 

    form.on('select(father_enter)', function(data){
    
        if(data.value==""){
    
            // console.log("sss");
            layer.msg("请选择企业名称");
            return false;
        }

    /* ajax 这里要请求后台API接口*/

     

    $.post("{:url('XXXXXX')}",{"id":data.value},function( res){
    
        if(res.code == 1){
            var enterlists=  res.entelist;
            var str="";
            for (var i=0;i<enterlists.length;i++){
    
              str +='<option value="'+enterlists[i]["id"]+'">'+enterlists[i]["enterprise"]+'</option>';   //这步骤 拼接select 中option的数据
    
            }
    
            $("#child_enter").html(str);
            form.render();         //注意不要忘记渲染form ,否则是不会出现select数据的      
        }
    

    });

     

    第二种: 在ajax请求的数据,在后台把select 中option数据,通过后台拼接好,然后返回数据,在接口返回值中,直接获取数据,

     将数据 使用

    $("#child_enter").html(res.htmlsoption);

    form.render(); //还是不要忘记渲染form ,否则是不会出现select数据的

     

     

    以上两种方法,希望对大家有帮助

     

     

     

     

     

     

    展开全文
  • layui框架----下拉框的二级联动

    千次阅读 2019-12-01 16:57:26
    一、layui.use 这里layui的官方文档:https://www.layui.com/doc/ layui这个框架采用的是经典模块化 layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载。 layui.use就是一种加载模块...
  • $.ajax({ url:"/build?method=sel", type:"GET", success:function (res) { console.log(res); //遍历后端数据 $.each(res,function(index,value){ $("#cname").append(.
  • 这里写自定义目录标题C#使用layui级联动下拉框框html前端代码Js前端代码C#后端代码 C#使用layui级联动下拉框框 ... <div class="layui-form-...联动选择框:</label> <div class="layui-input-inline">
  • layui联动选择框

    千次阅读 2019-12-23 15:57:55
    form class="layui-form" style="padding-top: 20px;" action="stockSave" method="post"> <div class="layui-form-item"> <div class="layui-inline"> <label class...
  • // 添加数据 public function add(){ // 查询分类数据 $category = \app\admin\model\Category::where('pid',0)->select(); // 渲染到页面 ... // 三级联动 查询数据 public function getPid($pid){ ...
  • 主要介绍了C# MVC 如何使用LayUI实现下拉框二级联动,文中示例代码非常详细,供大家参考和学习,感兴趣的朋友可以了解下
  • Layui框架的select下拉框实现二级联动

    千次阅读 2021-04-18 02:14:42
      二级下拉框:每个科室的床号 效果: 下拉框html代码: <div class="layui-form-item"> <label class="layui-form-label">所在科室</label> <div class="layui-input-inline"> &
  • 最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题form.on('select(uprovinceId)', function(data){initCityList('change');});这里面有个问题就是 选择的时候 ...
  • 最近在做一个项目,因为用到省市区联动,框架用的是layui框架,就自己写了个方法来实现! 因为很多地方需要使用这个,所以本人就封装了一个函数linkage.js 另外,此处用到一个省市区的js ,area.js 如有需要可以...
  • 定义一个json数据,使用layui的select实现三级联动的效果,在点击二级分类之后,出现相应的复选效果 页面实现效果 Json格式: {"firstOrder": ["整车服务","系统/零部件","电池服务","自动驾驶"], "secondOrder": ...
  • layui输入下拉框使用select二级联动

    千次阅读 2019-12-05 11:31:33
    在这里插入代码片 引入layui 脚本 ```<script src="<c:url value='/static/topayProfit/layui/layui.js'/>"></script> <script src="<c:url value='/static/topayProfit/layui/layui.all.js...
  • layui的插件效果,优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,...
  • layui select下拉框联动

    2021-04-09 11:37:17
    背景:涉及到 省市县获取的项目必有下拉框三级联动,每次都需要百度查询,或者去翻原来的项目,着实不方便。因此,为了自己对三级联动的印象加深,同时也帮助第一次接触下拉框三级联动的小伙伴快速上道,总结一下该...
  • 基于layui封装了一个地址选择器,地址数据采用weui的city-picker。因为项目很多都封装在common里面, 所以该common只抽出showCity和getCity方法。 一、用法 1. html写法 name和lay-filter必须保持统一,data-area...
  • layui二级下拉菜单

    2021-11-22 23:27:41
    <script> layui.use(['form'],function () { var form = layui.form ,table = layui.table ,layer = layui.layer ,$ = layui.jquery ,dropdown = layui.dropdown; /...
  • 基于Layui+form组件的省市区级联下拉框选择,需要的朋友可以下载,亲测蛮好用
  • layui下拉框联动查询效果

    千次阅读 2020-04-13 23:42:32
    之前有这么一个功能,需要设计一个联动效果来联动几个选择框,假设这里是院系-专业-班级,又或者省-市-县,又或者一级部门-二级部门等等的,一个下拉框选择联动另一个下拉框,其实都是异曲同工之妙。 解决方案 *. ...
  • 关于layui框架下拉框省市两级联动

    千次阅读 2018-11-20 16:49:50
    写在前面 废话不多说,直接进入正题 ...第步,在使用下拉框之前,需要在JS声明form模板 layui.use('form', function(){ var form = layui.form; 第三步,创建两个下拉框 &amp;lt;label cla...
  • layui 下拉框三级联动

    千次阅读 2018-11-23 15:32:24
    项目需要用layui的三级联动,自己瞎整了一下,做个记录 1.表结构设计 CREATE TABLE `dt_area` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域主键', `area_name` varchar(16) DEFAULT NULL COMMENT '...
  • layui省市区三级联动插件

    千次阅读 2019-09-04 10:33:39
    这个是一个layui省市区三级联动插件,近来使用layui后台模板框架开发后台系统,要用到省市县/区三级联动,本想从网上找个现成的轮子,然没有自己想要的需求,就自己造了个。 本插件实现省市区相应数据通过ajax动态从...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 178
精华内容 71
关键字:

layui二级联动选择框