Question

我有3个bootstrap下拉菜单，以便每次都过滤数据库结果，我想在click事件上运行Ajax调用。在目前的时间一切正常，除了每次我只能得到每个下拉的结果而不是所有3的组合。我无法找到解决方案，因为使用ajax调用我无法获取url参数我需要接下来的电话。如果需要，我愿意倾听更好的方法。

一些代码:(注意：我使用的是Laravel框架）

<div class="col-lg-5">
  <div class="btn-group dropup">
      <button type="button" class="btn btn-default btn-sm">Sort By Location</button>
      <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="{{ route('properties') }}" data-location="">ALL</a></li>
        @foreach ($allLocations as $location)
           <li><a href="{{ route('properties') }}<?= $location->location_id ?>" data-location="<?= $location->location_id ?>">{{$location->name}}</a></li>
        @endforeach
      </ul>
  </div>
  <div class="btn-group dropup">
      <button type="button" class="btn btn-default btn-sm ">Sort By Agent</button>
      <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
         <li><a href="{{ route('properties') }}" data-agent="">ALL</a></li>
         @foreach ($allAgents as $agent)
           <li><a href="{{ route('properties') }}<?= $agent->person_id ?>" data-agent="<?= $agent->person_id ?>">{{$agent->lastname.' '.$agent->firstname}}</a></li>
         @endforeach
      </ul>
  </div>
  <div class="btn-group dropup">
      <button type="button" class="btn btn-default btn-sm ownerf" id="ownerFilter">Sort By Owner</button>
      <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
         <li><a href="{{ route('properties') }}" data-owner="">ALL</a></li>
         @foreach ($allOwners as $owner)
           <li><a href="{{ route('properties') }}<?= $owner->person_id ?>" data-ownername="<?= $owner->lastname ?>" data-owner="<?= $owner->person_id ?>">{{$owner->lastname.' '.$owner->firstname}}</a></li>
         @endforeach
      </ul>
  </div>
</div>

和一些jQuery：

function updateProperties(url){
$.get(url)
        .done(function(result){  
        $data = $(result); 
        var rows =  $data.find("#propertyResults > *"); 
        $('#propertyResults').fadeOut().html(rows).fadeIn();
        var pages =  $data.find("#propertyPages > *"); 
        $('#propertyPages').empty().html(pages).fadeIn();
});

Answer 1

您尝试实现的目标是使用多个搜索过滤器。如果您需要所有三种组合的结果，为什么不使用checkboxes或multi-select dropdown。

示例：

如果有三个选项。每当用户选择一个选项时，使用jquery就可以获得所选选项的值

以下是示例jquery片段

$('select#my_multiselect').val()

这将返回一系列选定值。将它作为json发送到服务器并获取结果。

获取结果onClick事件并保留先前的请求参数

1 个答案: