效果如图,点击的条件出现在已选择的地方,点击已选择的条件可以删除当前点击的条件 语言是php 框架是laravel。
一、html
<div class="doctor-condition" id="doctor-condition"> <dl> <dt>已选择</dt> <dd id="condition-checked" class="condition-checked"><span id="select-no">尚未选择</span></dd> </dl> <dl> <dt>按门诊科室</dt> <dd> <ul class="cate"> @foreach($area as $item) <li>{{$item->clinic_name}}</li> @endforeach </ul> <ul class="depart" id="condition-depart"> @foreach($area as $item) <li style="display: none;"> @foreach($departs as $depart) @if($depart->area_id == $item->id) {{--{{url('doctorsList?dp='.$depart->id)}}--}} <a href="{{url('doctorsList?dp='.$depart->id)}}" data-id="{{$depart->id}}">{{$depart->depart_name}}</a> @endif @endforeach </li> @endforeach </ul> </dd> </dl> <dl> <dt>按职称</dt> <dd id="condition-position"> @foreach($title as $item) <a href="{{url('doctorsList?pr='.$item->id)}}" data-id="{{$item->id}}">{{$item->title_name}}</a> @endforeach </dd> </dl> </div>
二、js
//初始化选中科室 function selectedDepart(dp){ if(dp){ $("#select-no").html(""); var depart = $("#condition-depart li>a[data-id="+dp+"]"); depart.addClass("selected").siblings().removeClass("selected"); var copyThisA = "<a id='selectA' οnclick='conditionRemoveA($(this))'><span>"+depart.text()+"</span><i class='iconfont'></i></a>"; if($("#selectA").length > 0) { $("#selectA span").html(depart.text()); } else { $("#condition-checked").prepend(copyThisA); } } } //初始化选中职称 function selectedPr(pr){ if(pr){ $("#select-no").html(""); var title = $("#condition-position a[data-id="+pr+"]"); title.addClass("selected").siblings().removeClass("selected"); var copyThisB = "<a id='selectB' οnclick='conditionRemoveB($(this))'><span>"+title.text()+"</span><i class='iconfont'></i></a>"; if($("#selectB").length > 0) { $("#selectB span").html(title.text()); } else { $("#condition-checked").append(copyThisB); } } } //筛选参数 function getQueryString(){ var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g")); if(result == null){ return ""; } for(var i = 0; i < result.length; i++){ result[i] = result[i].substring(1); } return result; } //重新定义url function goSort(name,value,that) { var string_array = getQueryString(); var oldUrl = document.URL; var newUrl; if (string_array.length > 0)//如果已经有筛选条件 { var repeatField = false; for (var i = 0; i < string_array.length; i++) { if (!(string_array[i].indexOf(name) == -1)) { repeatField = true;//如果有重复筛选条件,替换条件值 newUrl = oldUrl.replace(string_array[i], name + "=" + value); } } // 如果没有重复的筛选字段 if (repeatField == false) { newUrl = oldUrl + "&" + name + "=" + value; } } if (string_array.length == false) { newUrl = document.URL + "?" + name + "=" + value; } that.attr('href', newUrl); } //删除筛选 function deleteSort(name,that){ var string_array = getQueryString(); var oldUrl = document.URL; var newUrl = oldUrl.split('?')[0]; var len = string_array.length; var reg=new RegExp(name); if(len > 0){ for (var i=0;i<len;i++){ if(string_array[i].match(reg)){ string_array.pop(string_array[i]); } } } if(string_array.length>0){ newUrl = newUrl+'?'+string_array[0] } that.attr('href',newUrl); } $(document).ready(function() { //初始化 $("#doctor-condition .cate li:first").addClass('cur'); $("#condition-depart li:first").show().siblings().hide(); $("#doctor-condition .cate li").hover(function() { $(this).addClass("cur").siblings().removeClass("cur"); $("#doctor-condition .depart li").eq($(this).index()).show().siblings().hide(); }); $("#condition-depart a").click(function() { $("#select-no").html(""); $(this).addClass("selected").siblings().removeClass("selected"); var copyThisA = "<a id='selectA' οnclick='conditionRemoveA($(this))'><span>"+$(this).text()+"</span><i class='iconfont'></i></a>"; if($("#selectA").length > 0) { $("#selectA span").html($(this).text()); } else { $("#condition-checked").prepend(copyThisA); } //筛选 var value = $(this).attr('data-id'); var name = 'dp'; goSort(name,value,$(this)); }); $("#condition-position a").click(function() { $("#select-no").html(""); $(this).addClass("selected").siblings().removeClass("selected"); var copyThisB = "<a id='selectB' οnclick='conditionRemoveB($(this))'><span>"+$(this).text()+"</span><i class='iconfont'></i></a>"; if($("#selectB").length > 0) { $("#selectB span").html($(this).text()); } else { $("#condition-checked").append(copyThisB); } //筛选 var value = $(this).attr('data-id'); var name = 'pr'; goSort(name,value,$(this)); }); }); function conditionRemoveA(ele){ ele.remove(); $("#condition-depart a.selected").removeClass('selected'); if($("#condition-checked a").length==0){ $("#condition-checked #select-no").html("尚未选择"); } //删除链接中的dp参数并重定向 deleteSort('dp',ele); } function conditionRemoveB(ele){ ele.remove(); $("#condition-position a.selected").removeClass('selected'); if($("#condition-checked a").length==0){ $("#condition-checked #select-no").html("尚未选择"); } //删除链接中的pr参数并重定向 deleteSort('pr',ele); }
三、php laravel
//医生列表 public function doctorsList(Request $request){ $depart_id = $request['dp'];//科室 $title_id = $request['pr'];//职称 $keyWord = $request['kw'];//搜索医生姓名或擅长 $area = dpyy_area::where('is_clinic','1')->orderBy('sort','asc')->get();//片区 $departs = dpyy_department::orderBy('area_id','asc')->get();//科室 $title = index_title::orderBy('sort','asc')->get();//职称 //筛选医生 if($keyWord){ $doctor = index_doctors::where('doc_name','like','%'.$keyWord.'%')->orWhere('doc_good','like','%'.$keyWord.'%')->orderBy(DB::raw('RAND()'))->paginate(9); }else{ $query = new index_doctors(); if($depart_id){ $query = $query->where('depart_id',$depart_id); } if($title_id){ $query = $query->where('title_id',$title_id); } $doctor = $query->orderBy(DB::raw('RAND()'))->paginate(9); } return view('home.doctor.list',compact('area','title','doctor','departs','depart_id','title_id','keyWord')); }
JS参考文章地址:https://blog.csdn.net/qq_39780174/article/details/79456817