layui 动态加载 select

最新推荐文章于 2024-07-24 23:16:01 发布

原创最新推荐文章于 2024-07-24 23:16:01 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #layui #thinkphp #ajax

笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍使用 layui 的 AJAX 功能实现多选框联动的方法。通过动态加载年份和商品类别，结合搜索框进行数据库查询，实现了高效的数据筛选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

感谢小张帅三代以及他的好文
layui ajax select 动态添加数据方法，给我指明了前进的方向。
首先，这是一个学习的过程，并不是最优方案。只是“玩索而有得”而己。
做了一个联动的搜索框，本来一开始想用layuiselect第三方插件，但后来没有成功，或者是说没有实现自己想要的目的。就利用layui现成的一套东东做了一下。按钮及功能如下：
1.年：点击“年”，“商品类别”随刷新并指向第一个“全部数据”，数据表随刷新；
2.商品类别：点击“商品类别”，“年”不动，数据表随刷新；
3.搜索文字框：点“搜索文字框”，自动根据“年”和“商品类别”匹配数据库相关内容，也是ajax系列；
4.搜索：点“搜索”,根据前面3个框的内容做综合查询，并刷新列表；
5.重置：点“重置”，回到页面初始状态，并且不刷新页面，但刷新列表。

下面贴出三段代码
这是html

<div class="layui-form layui-inline layui-col-md6 "  lay-filter="form_whereyear">
	<select name="whereyear" id="whereyear" lay-filter="whereyear" >
	</select>
</div>

这是JS：

 loadSelect_whereyear:function (doctype,whereyear){
        var form=layui.form;
        var option = "<option value=''>所有年份</option>";//初始化option的选项
        $.ajax({
            url: "/index/docnumberajax/select_whereyear",
            type: 'POST',
            data:'doctype='+doctype
        })
            .done(function(datas) {
                for(var i=0;i<datas.length;i++){
                    var year=datas[i]['name'];
                    //name是从后台提取的字段;
                    if (year!= whereyear){
                        option+="<option value='"+datas[i]['name']+"'>"+datas[i]['name']+"</option>";//拼接option中的内容
                        $("#whereyear").html(option);//将option的拼接内容加入select中，注意选择器是select的ID
                    }
                    else{
                        option+="<option selected='selected' value='"+datas[i]['name']+"'>"+datas[i]['name']+"</option>";//拼接option中的内容
                        $("#whereyear").html(option);//将option的拼接内容加入select中，注意选择器是select的ID
                    }

                }
                form.render('select','form_whereyear');//重点：重新渲染select
            })
            .fail(function() {
                console.log("error");
            });


    },

这是后台：

    public function select_whereyear(){
        $account = session('adminAccount');
        $usereditor = $account['username'];
        $doctype=input('doctype');
        $where[] = [
            ['a.doctype', '=', $doctype],//这个是文件类型转换1为一种文件，2为另一种文件
            ['a.status','=',1],
        ];
        $docyearData = Db::name('docnumber')->
        alias('a')->
        field(' a.doc_year as name')->
        whereOr('editor|applicant', '=', $usereditor)->
        where($where)->
        order('a.doc_year', 'ASC')->
        group('a.doc_year')->
        select();
		return json($docyearData);
    }