有关于formSelects插件的使用心得(入门)

最新推荐文章于 2024-04-15 09:57:04 发布

叫我小艾就好啦

最新推荐文章于 2024-04-15 09:57:04 发布

阅读量3.1k

点赞数 1

分类专栏： Layui Web前端文章标签： formSelects插件多选数据显示重复

本文链接：https://blog.csdn.net/Eric_aixiansen/article/details/103393436

版权

Layui 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Web前端

1 篇文章 0 订阅

订阅专栏

今天boss让我写一个小功能，使用formSelects插件可以实现多选的下拉选框，然后根据选择的数据进行查询。

这是formSelects插件的下载地址：https://fly.layui.com/extend/formSelects/#download

首先引入css和js文件，然后全局声明一次，就可以使用，如下代码所示

<body>
 <select name="select1" id="select1" xm-select="select1" xm-select-skin = "primary">
</select>//xm-select指定这个select是可以多选的并且使用了formSelect的样式  xm-select-skin = "primary" 设定皮肤
</body>        
<script type="text/javascript">
layui.config({

            base: "这个地方填写js的路径，只需要到文件夹 要加一个/" 比如
             base: "js/layui-v2.4.5/plugins/formSelects-v4/"
        }).extend({

            formSelects: 'formSelects-v4'//这个指定js的名字(不带.js后缀)
        });
然后就可以模块化去使用啦
        layui.use(["form","formSelects","table"],function(){

            var table = layui.table;
            var form = layui.form;
            var formSelects = layui.formSelects;


            //通过ajax动态查询数据并将数据添加到select上
            function f1(para1, para2) {

          
                $.ajax({

                    type : "post",
                    url : "请求路径",
                    dataType : "json",
                    data : {

                        "para1" : para1,
                        "para2" : para2
                    },
                    success : function(res){//res是后端返回的数据

                        if (res.code == 200) {

                            var data= res.data;
                            var keys = [];
                            for (var i = 0; i < data.length; i++) {

                                var temp = {

                                        "name" : data[i].para1,
                                        "value" : data[i].para2//这里需要注意，value应该不同，否则在下拉框选择数据的时候，选择上的数据回事一样的
                                }
                                keys.push(temp)
                            }
                            //由于formSelect需要的arr是[{"name":"shuju1","value":"shuju2"},{....},{...}]这样的格式，所以上面这样去处理
                            formSelects.data("select1", "local", {

                                arr : keys
                            });
                        }
                    }
                });
            }
        });


</script>

处理数据的时候，也是看前辈的帖子学到的，我原本使用的是拼接html形式去处理的，但是在这个过程中，选择完数据后多选框显示的数据总是一样的，所以我又换了一种形式去动态添加选项，但是还是出现同样的问题，最后发现是data赋值的时候，value出现了一样的值，设置值的时候就需要将值区别开就好了。

叫我小艾就好啦

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
有关于formSelects插件的使用心得(入门)

今天boss让我写一个小功能，使用formSelects插件可以实现多选的下拉选框，然后根据选择的数据进行查询。这是formSelects插件的下载地址：https://fly.layui.com/extend/formSelects/#download首先引入css和js文件，然后全局声明一次，就可以使用，如下代码所示<body> <select name="s...
复制链接

扫一扫