-
2022-03-16 16:52:11
select下拉可搜索加 lay-search
HTML
<select id="shopName" name="orderState" lay-search class="valid" style="height: 31px"> </select>
js
显示的是shopName 给后台传的值是shopId
$(function () { var pasams = { page: 1, limit: 1000 } $.ajax({ async: false, url: httpurl + "后台接口地址", type: "POST", data: pasams, headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8", token: localStorage.getItem("token"), }, success: function (data) { console.log(data.rows) $.each(data.rows, function (index, item) { $('#shopName').append(new Option(item.shopName, item.shopId)); //往下拉菜单里添加元素 }) }, }); });
更多相关内容 -
layui下拉列表select实现可输入查找的方法
2020-10-16 07:23:43今天小编就为大家分享一篇layui下拉列表select实现可输入查找的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui 中select下拉change事件失效的解决方法
2021-01-21 14:00:49layui 中select下拉change事件失效的处理方法 1.select中添加 lay-filter=“test” <select lay-filter=test></select> 2.处方方法 form.on('select(test)', function(data){ console.log(data.elem)... -
layui select选择下拉监听
2021-09-22 11:03:03前提: 已引入layui 官网: ...select name="sel" lay-filter="sel" id="sel"> <option value = ''>请选择</option> <option value = '1'>选择1</option> <op前提: 已引入layui
官网:https://www.layui.com/doc/
html
<div class="layui-input-inline"> <select name="sel" lay-filter="sel" id="sel"> <option value = ''>请选择</option> <option value = '1'>选择1</option> <option value = '2'>选择2</option> </select> </div>
js
layui.use(['form'], function () { let form = layui.form; form.render('select'); // 动态渲染layui select form.on('select(sel)',function () { // layui select下拉监听 let selData = $('#select2').val() } });
-
Layui动态生成select下拉选择框不显示的解决方法
2020-10-16 08:04:20今天小编就为大家分享一篇Layui动态生成select下拉选择框不显示的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui select 禁止点击的实现方法
2020-10-16 11:18:52今天小编就为大家分享一篇layui select 禁止点击的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
关于layui的下拉搜索框异步加载数据的解决方法
2020-10-16 07:23:59今天小编就为大家分享一篇关于layui的下拉搜索框异步加载数据的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui select下拉二级联动
2021-01-21 16:20:59...<div class="layui-form-item layui-row layui-col-space15"> <label class="layui-col-xs3 relative"> <span class="color-green"&...select class="layui-select" required name="school_id" lay-.以php语言为例
html
<div class="layui-form-item layui-row layui-col-space15"> <label class="layui-col-xs3 relative"> <span class="color-green">报考学校</span> <select class="layui-select" required name="school_id" lay-search lay-filter="school_id"> {php} $schools = Db::name('School') ->where(['pid' => '0']) ->field('id,title') ->order('sort desc,id desc') ->select(); {/php} {foreach $schools as $k=>$v} <!--{eq name='v.id' value='$vo.school_id|default=0'}--> <option selected value="{$v.id}">{$v.title}</option> <!--{else}--> <option value="{$v.id}">{$v.title}</option> <!--{/eq}--> {/foreach} </select> </label> <label class="layui-col-xs3 relative"> <span class="color-green">层次</span> <select name="level_id" lay-filter="level_id" id="two_cate" required> </select> </label> </div>
jq代码
<script> window.form.render(); //初始化渲染 $(function(){ $value = $('select[name="school_id"]').val(); school_select($value); }) //学校层次二级联动 form.on('select(school_id)', function(data){ //data.value 得到被选中的值 school_select(data.value); }); function school_select(value){ var url = '{:url("student/wxapp_product/getLevels")}?id=' + value; $.get(url,function(data){ $("#two_cate").empty(); $("#two_cate").append(new Option("请选择层次", "")); $.each(data.data,function(index,item){ if(item.id == '{$vo.level_id|default=0}'){ $("#two_cate").append(new Option(item.title, item.id, true, true)); }else{ $("#two_cate").append(new Option(item.title,item.id)); } }); layui.form.render("select"); }); } </script>
php代码
/** * 按学校id获取层级 * @param boolean $result */ public function getLevels() { $levels = Db::name('School') ->where(['pid' => request()->get('id')]) ->field('id,title,major') ->order('sort desc,id desc') ->select(); $this->success('获取成功', $levels); }
效果
另外
//指定选中某个值 $('select[name="jobs"] option[value="0"]').attr("selected", true); //获取选中选项中的某个值 $("select[name='ware_house_id']").find("option:selected").data('income_tuan_price'); $("select[name='ware_house_id'] option:selected").data('income_tuan_price');
如果您觉得本篇对你有帮助,可以点关注,给个赞,支持一下,过程有遇到什么问题也欢迎评论私信,进行交流
-
Layui tree 下拉菜单树的实例代码
2020-12-13 10:27:22layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-... -
Layui select 下拉单出现乱码
2021-01-15 17:38:20使用layui的Select的下拉的时候,带有特殊字符,选中的内容变成转义HTML, 例如下图,选中R&D时,text内容自动变成R&D 解决方法 找到From.js,查找 t(p[0].options[a]).html() 改为 t(p[0].options[a])....使用layui的Select的下拉的时候,带有特殊字符,选中的内容变成转义HTML,
例如下图,选中R&D时,text内容自动变成R&D
解决方法
找到From.js,查找 t(p[0].options[a]).html()
改为 t(p[0].options[a]).text()
问题得以解决。 -
Layui 动态禁止select下拉的例子
2020-12-10 22:40:13author:咔咔 wechat:fangkangfk 前端代码 js代码 // 禁止select点击 function disSelect() { var level = $('#is_level1').val();... layer.msg('一级分类父级不可修改');...以上这篇Layui 动态禁止selec -
Layui select下拉二级联动,动态渲染下拉选项
2021-11-04 17:07:20项目场景 select下拉二级联动: html代码: @Override <div class="layui-inline" style="width: 330px;"> <label class="layui-form-label">所属车队</label> <div class="layui-input-... -
layui下拉框获取下拉值(select)的例子
2020-10-16 10:50:18今天小编就为大家分享一篇layui下拉框获取下拉值(select)的例子,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui select下拉菜单联动
2020-12-31 09:12:13做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示商品类别请选择{volist name="list" id="vo"}{$vo.cate_name}{/volist}form.on('select(one_cate)', function(data){//data.value ... -
关于layui 下拉列表的change事件详解
2020-12-13 21:21:27渲染一下 不然你的操作还是不生效 select不是选择器 表示渲染下拉列表 不写表示所有表单都渲染 语法如下 form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 c -
layui实现select下拉选择框组件(含代码、案例、截图)
2021-06-28 15:47:42layui实现select下拉选择框组件(含代码、案例、截图) 案例 · 效果图: 全部代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content=... -
layui layer select 选择被遮挡的解决方法
2021-01-21 14:01:04在编程的时候, layer弹窗中的select 经常会遇到被遮挡的情况: 解决方法:在页面里面找到对应div的class 给overflow新的属性visible即可(默认值。内容不会被修剪,会呈现在元素框之外。)即可显示出下拉框 1.找到层... -
layui表单select下拉选择框高度设置
2022-03-19 10:47:26在我们使用layui的弹出层时,如果layer弹出的是页面层,恰巧这个页面层高度无需太高,又恰巧弹出层内部表单包含一个下拉框,更恰巧这个下拉框的内容还....layui-form-select dl { display: none; position: absolute; -
layui监听select下拉选择框
2021-02-26 08:48:10layui监听select下拉选择框1、方法一2、方法二 1、方法一 可以用 form.on('select(type)', function(data){ console.log(data.value)//选中的值 }) type为select标签中的lay-filter属性值 该方法保留了layui的... -
基于layui的下拉列表的数据回显方法
2020-10-16 08:04:57今天小编就为大家分享一篇基于layui的下拉列表的数据回显方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui设置select下拉列表展示框的宽度
2020-06-23 18:28:39添加样式,可以放到head里面 <style type="text/css"> input.layui-input.layui-unselect {width:200px} </style> -
layui select下拉菜单联动(子下拉框根据父下拉框不同显示不同内容)
2020-08-28 18:27:54有不同的代理商,也就是店铺....直接点商品分类是没有...div class="layui-inline"> <label class="layui-form-label">代理商</label> <div class="layui-input-inline"> <sele -
layui select下拉菜单 自动选择问题(回选)
2018-11-20 10:56:52layui自动生成的格式,不能用之前的JQ方式来实现select下拉菜单自动选择功能 layui select的格式: 下面这个框里面的dl-dd是layui自动生成的,也就是关键所有,看下具体的结构图: //选择需要选中的对象 var ... -
layui表单验证select下拉框实现验证的方法
2020-10-16 11:18:31今天小编就为大家分享一篇layui表单验证select下拉框实现验证的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
Layui 设置select下拉框自动选中某项的方法
2020-12-29 06:04:412、 Layui的select下拉框是怎么实现的 为了获得一个select标配的下拉框,我们需要在html中填写的内容如下: <div class=layui-form-item> <label class=layui-form-label>* 发送对象: <div class=layui-input-... -
layui select下拉框监听值变化 layui 下拉列表的change事件
2018-09-24 22:52:12layui下拉列表的事件不能用jq的change 应该用自带的方式写 。 默认情况下,事件所监听的是全部的form模块元素,但如果你只想监听某一个元素,使用事件过滤器即可。 如 监听select 下拉选择框被选中时触发,回调... -
LayUI下拉多选添加选中事件.zip
2021-06-04 10:05:00博客中资源包
收藏数
2,556
精华内容
1,022