精华内容
下载资源
问答
  • layui下拉框联动查询效果

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

    前言

    之前有这么一个功能,需要设计一个联动效果来联动几个选择框,假设这里是院系-专业-班级,又或者省-市-县,又或者一级部门-二级部门等等的,一个下拉框选择联动另一个下拉框,其实都是异曲同工之妙。
    在这里插入图片描述

    解决方案

    *. 由于系统代码为保密,所以这里只摘录部分代码并对原有的变量等做了处理

    1. HTML部分,两个select框。
    <label class="layui-form-label">一级部门</label>
    <select id="departmentFirstLevel" name="departmentFirstLevel">
       <option value=""></option>
    </select>
    
    <label class="layui-form-label">二级部门</label>
    <select id="departmentSecondaryLevel" name="departmentSecondaryLevel">
       <option value=""></option>
    </select>
    
    1. 初始化一级部门
    function initDepartmentFirstLevel(){
       $.ajax({
           type: 'POST',
           url: "${request.contextPath}/departmentFirstLevel/list",
           data:{"searchParams":"","page":"1","limit":"99"},
           success: function (responseData) {
               if (responseData.code === 200 || responseData.code === 0) {
                   var length = responseData.data.length;
                   console.log("一级部门数量:"+length);
                   $("#departmentFirstLevel").empty();
                   $("#departmentFirstLevel").append('<option value=""></option>');
                   for(var i = 0; i < length; i++) {
                       //添加option元素
                       $("#departmentFirstLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>");
                   }
                   //如果你是用freemaker,可以用该方法选中变量
                   $("#departmentFirstLevel").val("${(user.departmentFirstLevel)!!}");
                   //渲染select
                   form.render('select');
               } else {
                   layer.msg("加载列表失败");
               }
           }
       });
    }
    //直接初始化一级部门
    initDepartmentFirstLevel();
    
    1. 设置一级部门联动二级部门效果。
    form.on('select(departmentFirstLevel)', function(data){
        //根据一级部门联动二级部门
        initDepartmentSecondaryLevel();
    });
    
    1. 二级部门联动逻辑,核心就是传入选择的i一级部门id,传给Controller方法查询并列出对应的二级部门,产生联动效果。
    function initDepartmentSecondaryLevel(){
        $.ajax({
            type: 'POST',
            url: "${request.contextPath}/departmentSecondaryLevel/list",
            data:{"searchParams":"{'departmentFirstLevel':'"+$("#departmentFirstLevel").val()+"'}","page":"1","limit":"99"},
            success: function (responseData) {
                if (responseData.code === 200 || responseData.code === 0) {
                    var length = responseData.data.length;
                    console.log("二级部门数量:"+length);
                    $("#departmentSecondaryLevel").empty();
                    $("#departmentSecondaryLevel").append('<option value=""></option>');
                    for(var i = 0; i < length; i++) {
                        //添加option元素
                        $("#departmentSecondaryLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>");
                    }
                    //如果你是freemarker,可以用该方法设置选中效果
                    $("#departmentSecondaryLevel").val("${(user.departmentSecondaryLevel)!!}");
                    //渲染select
                    form.render('select');
                } else {
                    layer.msg("加载列表失败");
                }
            }
        });
    }
    //如果二级部门数量较少,可以考虑直接初始化(当然, 建议不要)。
    //initDepartmentSecondaryLevel()
    
    展开全文
  • layui下拉框的使用

    万次阅读 2019-03-19 18:35:39
    div class="layui-form"> <select name="" id="" lay-filter="myselect"> <option value="zhang">张先生</option> <option value="wang">王先生</option>...

    在HTML中写固定值

    option的value值一定要给,不然选中一个,再次展开下拉框时,默认选中项一直是第一项

    <div class="layui-form" lay-filter="myDiv">
       <select name="" id="" lay-filter="mySelect">
          <option value="zhang">张先生</option>
          <option value="wang">王先生</option>
          <option value="li">李先生</option>
       </select>
    </div>
    

    如果没有渲染,就在js里写上

    layui.form.render('select','myDiv');
    

    js动态插入option 渲染下拉框

    var str = '<option value="zhang">张先生</option><option value="wang">王先生</option><option value="li">李先生</option>';
    $('select').append(str);
    layui.form.render('select','myDiv');
    

    下拉框选择某一项

    layui.form.on('select(mySelect)', function (data) {
        console.log(data);
    })
    
    展开全文
  • layui下拉框实时输入查询加防抖(类百度搜索) 目前layui下拉框支持输入的模糊查询,但是是从下拉框已有选项中查询,没有实现从后端接口的查询,那么,我们来解决这个问题 需要的提前了解的内容: 1.事件委托 链接 ...

    layui下拉框实时输入查询加防抖(类百度搜索)

    目前layui下拉框支持输入的模糊查询,但是是从下拉框已有选项中查询,没有实现从后端接口的查询,那么,我们来解决这个问题
    在这里插入图片描述
    需要的提前了解的内容:
    1.事件委托 链接 :https://www.jianshu.com/p/6fe074dfdc73
    2. 函数节流/防抖 相关博文:链接: https://blog.csdn.net/zuorishu/article/details/93630578

    先说js。
    需要用到防抖(具体在我贴出的博文中讲的很清楚)

    //防抖函数
    		function debounce(fn,delay){
    			var timeOut = null;//存放settimeout返回值
    			return function(e){
    				clearTimeout(timeOut);//清除定时器
    				timeOut = setTimeout(() =>{
    					fn.call(this,arguments);
    				},delay)
    			}
    		}
    

    输入框的监听 给下拉框父div加id名test

    //下拉输入框监听
    		//给输入框的父节点加事件代理
    		$('#test ').on('keyup',"input",debounce(keyUpListern,1000));
    		function keyUpListern() {
    			var requestData = {customer:$(this).val()};
    			getSelectOption("test",requestData,defaults.baseUrl + "/quotation/customer_serch","customerId","customerName")
    		}
    

    请求接口,填充下拉选项

    //填充下拉框选项
    		function getSelectOption(selectId,requestData,url) {//selectId:下拉框id,requestData:请求参数,url:接口地址
    			$.post(url,requestData,function(data){
    				if(selectId.indexOf("#") != 0){
    					selectId = "#" +selectId
    				}
    				data = data.body
    				$(selectId).find("select").empty();//清空下拉选项
    				for(var k in data){
    					$(selectId).find('select').append("<option value='"+data[k].customerId +"'>"+ data[k].customerName + "</option>")
    				}
    				layui.use('form',function(){
    					var form = layui.form
    					form.render()
    				})
    				form.render()//重载下拉
    			})
    		}
    

    HTML代码 只贴了下拉框

    			<div class="layui-inline" id="test">
    				<select name="belonger_id" lay-verify="required" lay-search>
    					<option value="">请选择业务员</option>
    				</select>
    			</div>
    
    展开全文
  • layui下拉框选中

    2020-10-15 17:31:39
    layui 下拉框根据数据状态选中列表值 先定义一个下拉框以及列表值 在数据绑定时做一下处理即可 注:value要与数据状态相一致,在此我用数字定义数据的状态。

    layui 下拉框根据数据状态选中列表值

    1. 先定义一个下拉框以及列表值
      在这里插入图片描述

    2. 在数据绑定时做一下处理即可
      在这里插入图片描述
      注:value要与数据状态相一致,在此我用数字定义数据的状态。

    展开全文
  • 今天小编就为大家分享一篇解决JavaScript layui 下拉框不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui下拉框select动态获取后台数据,下拉框二级联动效果,压缩包里打开a.html即可查看。
  • jQuery基于Layui下拉框搜索提示列表代码,支持中文跟拼音首字母进行搜索匹配在下拉框列表显示。
  • 今天小编就为大家分享一篇layui下拉框获取下拉值(select)的例子,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui下拉框赋值

    千次阅读 2018-02-08 11:44:00
    layui下拉框赋值 原创2017年11月08日 18:45:39 2087 1、定义下拉框 <div class="layui-input-block layui-form" lay-filter="selFilter"> <select id="sel" lay-verify="required" > ...
  • Layui 下拉框Select onchange事件监听

    万次阅读 2020-11-05 20:08:46
    div class="layui-input-block"> <select name="productId" lay-verify="required" lay-search id="productSelect" lay-filter="productSelectChange"> <option value="-1">请选择产品.
  • Layui下拉框设置 高度

    千次阅读 2019-03-25 14:57:00
    Layui怎么调节下拉框的高度layui框架下拉框显示 layui框架下拉框显示 很多人都会用到layui框架,根据项目的需要有时候需要调节select 的高度,但是试了很多方法都不行,我也试了很久,都准备放弃了,突然抱着试试的...
  • 【经典】layui下拉框分页,大数据解决方案-附件资源
  • Layui下拉框数据绑定

    千次阅读 2019-07-27 16:34:28
    如何实现layui下拉框加载动态数据: 首先创建一个LayuiCreateSelect()方法: LayuiCreateSelect()有三个参数selectId、url、value selectId: 是select标签上的ID, url:是控制器方法, value:是设置加载完成时所选定...
  • 今天小编就为大家分享一篇解决layui下拉框监听问题(监听不到值的变化),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui下拉框支持大小写查询 版本:layui-v2.5.6 var T = this.value.toUpperCase(), U = V.keyCode;
  • layui 下拉框搜索及代码实现

    千次阅读 2020-12-31 17:54:58
    layui 下拉框搜索 和注意点 实现效果 一:html <div class="layui-inline"> <select id="contentType" name="contentType" > <option value="">内容类型</option> @for(item in ...
  • layui下拉框动态赋值html代码:js代码:上图: html代码: <div class="layui-input-inline"> <select id="service" name="service" lay-verify="required" lay-filter="business" class="select"> ...

空空如也

空空如也

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

layui下拉框查询