Layui带搜索的下拉框的使用以及动态数据绑定方法

说起下拉框大家一定不陌生，就是放着指定内容的容器需要什么就直接选择就可以了，很方便。但是凡事都有利弊两面，在数据少的时候是挺方便的但是数据一多起来就选得用户头昏眼花，影响用户体验。所以就有了带查询的下拉框出现，这个下拉框的功能很强大，结合了输入框和下拉框为一体，既可以进行模糊查询，又可以直接选择，比以前的下拉框更加方便了。今天要介绍的就是layui的form表单组件里的带查询的下拉框。

用任何插件都需要引用相应的css文件和js文件，在这就不多说了。但layui的form表单组件不仅要引用插件还需要加载相应的模块，少了这两步操作，select、checkbox、radio等将无法显示，并且无法使用form相关功能，下面就是加载的方法:

另外，还要在一个容器中设定 class="layui-form" 来标识一个表单元素块，如要使用带搜索的下拉框只需在select标签添加一个”lay-search”属性就可以了。

这就是绑定到了。

下拉框的数据一般是动态的，数据大多是从数据库中查询出来再绑定到下拉框的。为了方便，绑定数据的方法一般写在一个方法里方便使用。

方法的参数一般有三个，一个是select标签的id，一个是查询数据的路径，还有一个是可有可无的选中值。其实方法里面就是由一个post请求构成的，构建一个动态下拉框大致分为两步，第一步请求数据，第二步把查询到的数据拼接到下拉框里。

请求数据就是直接一个post请求，把传进来的路径拼接到post请求的路径中就可以了。

拼接select内容这一步就是在post请求的回调函数里进行的，遍历查询到的数据用方法append()一个个的拼接到select里面，在拼接之前要先拼接一个value值为空的选项，这个选项是给请选择预留的，否则一开始就会选中拼接的第一个数据，导致一些不需要选择的数据没办法取消选择。

还有就是选中值，首先要判断传过来的选中值是否为空，不为空再设置select的val值。

如果要用layui的下拉框那就必须添加多一段代码，就是重载表单：form,render();。如果不加这一句代码的会导致下拉框的数据时有时无，绑定的数据漂浮不定，一会绑定成功一会绑定失败。

以上这篇Layui带搜索的下拉框的使用以及动态数据绑定方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui 根据后台数据动态创建下拉框并同时默认选中的实例

    第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-form-label">下拉选择框</label> <div class="layui-input-block"> <select id="selectId" name="interest" lay-filter=&q

  • 使用layui监听器监听select下拉框,事件绑定不成功的解决方法

    如下所示: 使用layui监听select所选的value 需要注意的是:form.on必须写在layui.use(){ }中 且使用layui动态添加option时,必须要进行渲染(form.render()),否则选项追加不上 这样做完之后如果还不能获取select所选的value,那就需要检查一下select所在的form表单有没有写class属性,如果没有写class属性,就监听不到select 如果在完成后台操作之后跳转页面时不显示样式了,就检查一下请求路径resultmapping后

  • 解决layui下拉框监听问题(监听不到值的变化)

    关于layui监听下拉框值得变化,大家都知道官方文档给我们提供了一个方法 form.on('select(demo)',function(data){ console.log(data.value)//打印当前select选中的值 }) 按照我之前的理解,监听下拉框值得变化,就是只有下拉框的值发生了改变,才会触发这个事件,否则就不触发.但是这个方法是,只要你鼠标点击了下拉选项里面的值,不论这个值跟之前的值是否相等,都会触发这个事件. 下面说一下我的解决办法 1.首先,我写了一个input框,用来

  • Layui带搜索的下拉框的使用以及动态数据绑定方法

    说起下拉框大家一定不陌生,就是放着指定内容的容器需要什么就直接选择就可以了,很方便.但是凡事都有利弊两面,在数据少的时候是挺方便的但是数据一多起来就选得用户头昏眼花,影响用户体验.所以就有了带查询的下拉框出现,这个下拉框的功能很强大,结合了输入框和下拉框为一体,既可以进行模糊查询,又可以直接选择,比以前的下拉框更加方便了.今天要介绍的就是layui的form表单组件里的带查询的下拉框. 用任何插件都需要引用相应的css文件和js文件,在这就不多说了.但layui的form表单组件不仅要引用插件还

  • Django实现jquery select2带搜索的下拉框

    Django实现jquery select2带搜索的下拉框

    最近在开发一个web应用中需要用到带搜索功能下拉框,曾经尝试网上的django 包, django-select2-forms, 这是款功能强大的packets, 可惜不支持我的开发环境centos+python3.7+django 2.0.2, 只好下载原生jquery select2 ,通过参考官方文档,多次测试最终实现了简单的带搜索功能下拉框,它根据在前端搜索框输入的字符,ajax调用后台的试图函数查询数据库,然后将查询结果返回给前端生成下拉框列表. 1,前端代码 <script src=

  • angular4实现带搜索的下拉框

    angular4实现带搜索的下拉框

    本文实例为大家分享了angular4实现带搜索的下拉框的具体代码,供大家参考,具体内容如下 思路: 1.站在巨人的肩膀上,确定了bootstrap-select的插件样式.确定了primeNG的DropDwon的模型. 2.分析自己的下拉框的需求,一步一步实现. 先看下下拉框的最后样式: 第一步十分简单 1).由于之前看过下拉框的插件的css样式代码.于是乎直接把样式文件,拷过来.再把相应的的html源码拿过来,直接拷贝. 2).由于只需要搜索功能的这块样式,其余的css样式全部删掉,减少无用的

  • 解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题

    首先: 引入需要的css和js <link rel="stylesheet" href="${ctx}/adminthemes/version3/plugins/layui/css/layui.css" rel="external nofollow" /> <script type="text/javascript" src="${ctx}/adminthemes/version3/plugins/

  • layui Ajax请求给下拉框赋值的实例

    如下所示: <!DOCTYPE html> <html> <head> <title>排课设置</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w

  • Layui 设置select下拉框自动选中某项的方法

    1. 需求场景分析 用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A.在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值. 2. Layui的select下拉框是怎么实现的 为了获得一个select标配的下拉框,我们需要在html中填写的内容如下: <div class="layui-form-item"> <label class="layui-form-label"><span

  • 在layui框架中select下拉框监听更改事件的例子

    在select 加入红框中的代码(看不到红框的往右拖动一点) 事件监听select(这里面是上面图中红框内容   可自定义) 以上这篇在layui框架中select下拉框监听更改事件的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • js实现下拉框选择要显示图片的方法

    本文实例讲述了js实现下拉框选择要显示图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>下拉框选择要显示的图片</title> <body> <img width=320 height=240 src="images/m01.jpg" name="x1"> <SELECT onChange="document.x1.src=options[selectedIn

  • jsp从数据库获取数据填充下拉框实现二级联动菜单的方法

    本文实例讲述了jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.分享给大家供大家参考,具体如下: 项目告一段落,现在将遇到的比较实用的东西记录下来,写了多遍了,谨记于此,以备查看! 1.首先在数据库中获取第一个下拉框的数据: <s:select listKey="tsFrom" id="t_tsfrom" cssClass="required" listValue="tsFrom" cssStyle="w

  • 可输入文字查找ajax下拉框控件 ComBox的实现方法

    GooFunc.js文件 //获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到 function getElCoordinate(dom) { var t = dom.offsetTop; var l = dom.offsetLeft; dom=dom.offsetParent; while (dom) { t += dom.offsetTop; l += dom.offsetLeft; dom=dom.offsetParent; }; return { top: t, lef

随机推荐