感谢小张帅三代以及他的好文
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);
}