html
<div class="container"> <table class="table"> <select class="sel" name="id_en"><option value="" class="first">一级分类</option></select> <select class="sel" name="id_on"><option value="" class="first">二级分类</option></select> <select class="sel" name="id_in"><option value="" class="first">三级分类</option></select> </table> </div>
js
$(function () { ajaxSel(); $('.sel').change(function () { var pid=$(this).val(); var _this=$(this); ajaxSel(pid,_this); }) function ajaxSel(pid=0,_this='') { $.ajax({ url:"sel", data:{pid:pid}, type:'get', dataType:'json', success:function (res) { console.log(res); var e=res.data; var content=''; $(e).each(function (i) { content+="<option value='"+e[i].id+"'>"+e[i].name+"</option>"; }) //判断要追加的位置 if(pid){ _this.next('select').find('option:not(.first)').remove(); _this.next().append(content); }else{ $('select:first').append(content) } } }) } })
后台代码
public function sel(Request $request){ //获取上级分类id $id=$request['pid']; //查询分类信息 $date= city::sel($id)->Toarray(); //返回json格式数据 return json_encode(['code'=>200,'msg'=>'请求成功','data'=>$date]); }