Вот обновление моего вопроса:
У меня есть вкладка фильтра из базы данных, но я делаю цикл для отображения вкладки фильтров.
ПРОБЛЕМА
Но проблема в том, что когда мы нажимаем на вкладки, в нем должен отображаться выпадающий список, из которого я могу выбрать то, что мы хотим отфильтровать.но он показывает только первый фильтр, а другие не работают.
РЕДАКТИРОВАТЬ файл моего просмотра
<form id="tabForms" action="{{route('o')}}" method="GET">
<div class="col-xs-12 col-sm-8 col-md-6 filter-bootstrap" style="padding:0px;margin-bottom:20px;">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<button type="button" class="btn btn-warning dropdown-toggle"
data-toggle="dropdown" aria-expanded="false"
style="background:#FFF;color:#575962;border:solid 1px #e7ecf1;box-shadow: none;font-weight: 300;
font-size: 15px;text-transform: capitalize;padding: 5px 12px;height: 35px;border-radius:3px 0px 0px 3px;">Add Search Field
</button>
<ul class="dropdown-menu productFilter" id="filters">
<li id="Payment Status" onclick="productFilter(this.id)" ><a href="#">Payment Status</a></li>
<li id="Shipping Status" onclick="productFilter(this.id)" ><a href="#">Shipping Status</a></li>
<li id="Order Total" onclick="productFilter(this.id)" ><a href="#">Order Total</a></li>
<li id="Item Weight" onclick="productFilter(this.id)" ><a href="#">Item Weight</a></li>
<li id="Shipping class Name" onclick="productFilter(this.id)" ><a href="#">Shipping class Name</a></li>
<li id="Shipping Country" onclick="productFilter(this.id)" ><a href="#">Shipping Country</a></li>
<li id="Refund Status" onclick="productFilter(this.id)" ><a href="#">Refund Status</a></li>
<li id="Shipping class Name" onclick="productFilter(this.id)" ><a href="#">Shipping class Name</a></li>
<li id="Warehouse Location" onclick="productFilter(this.id)" ><a href="#">Warehouse Location</a></li>
<li id="Shipment Status Date" onclick="productFilter(this.id)" ><a href="#">Shipment Status Date</a></li>
<li id="Payment status" onclick="productFilter(this.id)" ><a href="#">Payment status</a></li>
</ul>
<input type="hidden" class="form-control" name="productFilterType" value="" id="productFilterType"/>
</div>
<!-- /btn-group -->
<!--show text on input -->
<div class="filter-top">
@php
use App\Filter;
$userId = Auth::id();
$filters = Filter::where('user_id',$userId)->get();
foreach($filters as $getfilter)
{
$filter_name = $getfilter->filter_name;
$filter_id = $getfilter->id;
@endphp
<label id="inputTagFilterId" class=filter-id{{$filter_id}} style="color:#666;margin:7px;"> {{$filter_name}} <span class="close-tab"><a style="border-left: dotted 1px #666;color: #666;"> X </a></span></label>
@php }
@endphp
</div>
<div id="filterpop">
<div class='tb-dropdown tb-fieldfilter-popup tb-fieldfilter-selectfieldfiltereditor-popup tb-fieldfilter-selectfieldfiltereditor-popup-large' style='display: block; min-width: 261px; z-index: 1001; opacity: 1; left: 513.609px; top: 195.75px;' data-turbodropdown-popup='' data-positioned='bottomleft'>
<div class='tb-fieldfilter-popup-fields'>
<select class='tb-select tb-fieldfilter-selectfieldfiltereditor-operators' data-turbofieldfilter-selectfieldfiltereditor-operator-field=''>
<option value='equals'>Equals</option>
<option value='notEquals'>Not Equals</option>
<option value='in'>In List</option>
<option value='notIn'>Not In List</option>
</select>
<span class='tb-fieldfilter-popup-errors' data-turbofieldfilter-selectfieldfiltereditor-operator-errors=''></span>
<span class='tb-fieldfilter-selectfieldfiltereditor-values' data-turbofieldfilter-selectfieldfiltereditor-value-fields=''>
<div class='tb-fieldfilter-selectfieldfiltereditor-selector tb-inlineselect tb-inlineselect-multiple' data-turbofieldfilter-selectfieldfiltereditor-selector=''>
<div class='tb-inlineselect-messages' data-turboinlineselect-messages=''>
</div>
<div class='tb-inlineselect-searchbox tb-text-field tb-text-field-with-feedback tb-searchbox' data-turboinlineselect-searchbox=''>
<input type='text' class='tb-input' autocomplete='off' data-turbosearchbox-input='' placeholder='Search...'>
<i class='tb-text-field-feedback' data-turbosearchbox-state-indicator=''></i>
</div>
<div class='tb-inlineselect-selected-items' data-turboinlineselect-selected-items=''>
<div class='tb-inlineselect-selected-items-header' data-turboinlineselect-selected-items-header=''>
<span class='tb-inlineselect-selected-items-title' data-turboinlineselect-selected-items-title=''>Selected:</span>
</div>
<div class='tb-inlineselect-selected-items-viewport' data-turboinlineselect-selected-items-viewport='' style='height: 150px;'>
<div class='tb-inlineselect-selected-items-list' data-turboinlineselect-selected-items-list=''>
<div data-turbolistview-item-key='0' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Unshipped</div>
</div>
</div>
</div>
</div>
<div class='tb-inlineselect-search-results' data-turboinlineselect-search-results='' style=''>
<div class='tb-inlineselect-search-results-header' data-turboinlineselect-search-results-header=''>
<span class='tb-inlineselect-search-results-title' data-turboinlineselect-search-results-title=''>Search Results:</span>
<span class='tb-inlineselect-select-all' data-turboinlineselect-select-all='' data-turboinlineselect-action='selectAll'>Select All</span>
<span class='tb-inlineselect-unselect-all' data-turboinlineselect-unselect-all='' data-turboinlineselect-action='unselectAll'>Clear</span>
</div>
<div class='tb-inlineselect-search-results-viewport' data-turboinlineselect-search-results-viewport='' style='height: 150px;'>
<div class='tb-inlineselect-search-results-list' data-turboinlineselect-search-results-list=''>
<div data-turbolistview-item-key='0' class='tb-listview-item tb-inlineselect-selected-item'>
<div class='tb-inlineselect-item'>Unshipped</div>
</div>
<div data-turbolistview-item-key='1' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Shipped</div>
</div>
<div data-turbolistview-item-key='2' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Partially Shipped</div>
</div>
<div data-turbolistview-item-key='4' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Pending Shipment</div>
</div>
<div data-turbolistview-item-key='8' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Canceled</div>
</div>
<div data-turbolistview-item-key='16' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Third Party Managed</div>
</div>
</div>
<div class='tb-inlineselect-search-results-truncated' data-turboinlineselect-search-results-truncated=''>
</div>
</div>
</div>
</div>
<span class='tb-fieldfilter-popup-errors' data-turbofieldfilter-selectfieldfiltereditor-value-errors=''>
</span>
</span>
</div>
<div class='tb-fieldfilter-popup-buttons'>
<button class='tb-btn' data-turbofieldfilter-selectfieldfiltereditor-update=''>Update</button>
<a href='#' class='tb-btn-link' data-turbofieldfilter-selectfieldfiltereditor-cancel=''>Cancel</a>
</div>
</div>
</div>
</div>
</div>
</div>
Файл контроллера
public function index(request $request)
{
$productFilterType = $request->input('productFilterType');
return view('pages.order',array(
'productFilterType' =>$productFilterType,
));
}
jquery
function productFilter(value) {
alert(value);
jQuery("#productFilterType").val(value);
jQuery("#tabForms").submit();
}
$(document).on('click','#inputTagFilterId',function(){
var label = $('#inputTagFilterId');
var filterid = label.attr('class');
alert(filterid);
$("."+filterid).click(function(){
$("#filterpop").show();
});
});