layui 动态加载 select

感谢小张帅三代以及他的好文
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);
    }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值