Layui-下拉框

Layui-下拉框

文献种类：专题技术文献；

开发工具与关键技术： VS、JS

作者：方建恒 ；年级：20级 ；撰写时间： 2022 年 2 月 8日

今天我们来讲一下Layui插件里的动态下拉框数据绑定。

在layui的表单中我们的下拉框要变成动态的话就需要Layui的方法，

一般的方法会在Layui表单渲染的时候被刷新掉，

所以我们得用Layui的方法来进行绑定数据，这样才可以绑定上去。

接下来我们来实际运用一下：

首先我们把Layui的JS和CSS引入，

然后创建一个Layui样式的下拉框，id为xlk，代码如图：

然后我们创建一个类，将其命名为。

这个类将用于下拉框数据的获取，代码如下：

然后我们开始动态获取数据，我们先加载&初始化layui组件，

然后调用方法()，并传递过去路径和下拉框ID。如图：

然后对下拉框进行重载，重载时间为0.5秒，代码如图：

接下来我们来写()方法，

我们用url和id分别来接收传递过来的路径和下拉框ID，

然后用向控制器发送请求，

再用empty()方法删除匹配的元素集合中所有的子节点，

然后声明一个标签，然后遍历控制器传递过来的数据，

把它拼接到刚才声明的标签里，最后再添加到页面上的下拉框。

具体代码如图：

接下来是控制器部分，

控制器部分十分简单，你只需要写一个数据查询就好了，

因为下拉框的数据一般是一张表的数据，

所以我们只需要进行单表查询就可以了，

下面是我的查询，大家可以参考一下：

是我上面写好的一个类，用于下拉框数据的获取和回填，