通过ajax获取数据，然后使用select应用过滤器

Question

我有3个不同的选择菜单： 1.类别2.状态3.城市

我正在使用ajax获取“#searchresult”上的数据，方法是使用jquery on change在PHP上发送数据。

抓取正在正常进行，但仅针对一个“选择”选项。

我想要的是当用户改变另一个“选择”选项时，它将更新当前“#搜索结果”获取的数据。像：假设，在将“类别”更改为“汽车”时，它在“#搜索结果”上获取“汽车”的所有数据，现在在“州”更改为“纽约”时，它更新了在纽约的“#搜索结果”。

我尝试了许多不同的方法，比如使用多个if语句来确定select是否为choosen，但是没有找到where。

提前谢谢。

我的代码是：

$(document).ready(function() {
  $("#category").change(function() {

    var data = $("#category option:selected").val();
    var category = $("#category option:selected").text();

    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('id');
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
      type: "POST",
      url: "category",
      data: {
        data: data
      },
      dataType: 'json',
      cache: false,
      success: function(response) {
        $("#searchresult").html("");

        for (var i = 0; i <= 5; i++) {
          $("#searchresult").append('<div class="col-12 col-sm-10 col-md-4 col-lg-3 col-xl-2 merchant" style="background-image: url(https://im.proptiger.com/1/1543935/6/green-villa-elevation-7990949.jpeg?width=380&height=285);">   	<div class="filter"></div>   	 <span class="category">' + category + '</span>   		<div class="col align-self-end">   		<p>' + response.contractor[i].first_name + '</p>   		<span>' + response.contractor[i].city_name + ',' + response.contractor[i].state_name + '</span>   		</div>   	<div class="slideup">   		<p>More info?</p>   		<a href="' + response.contractor[i].url + '" class="btn">Profile</a>   	</div>   </div>');
        }
      }
    });

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="category" id="category" class="chosen">
<option value="0" default>category</option>
<option value="1">Car</option>
<option value="2">Van</option>
</select>

<select name="state" id="state" class="chosen">
<option value="0" default>state</option>
<option value="1">Any</option>
<option value="2">other</option>
</select>

<select name="city" id="city" class="chosen">
<option value="0" default>city</option>
<option value="1">New york</option>
<option value="2">Chicago</option>
</select>

<div id="searchresult"></div>

PHP以json的形式发送数据。

谢谢

Answer 1

@user5745970这里是我创建的提琴示例，让您了解需要做什么。下面是小提琴的链接

这个想法是为每个选择设置3个不同的更改事件，并触发对服务器的调用。您需要做的是将其他选择值作为数据发送（如果选择）。例如，如果在已选择类别时更改城市，则需要将类别和城市发送到服务器以获得响应。如果所有3个服务器端调用都返回相同的JSON结构，那么您只能有1个成功和错误回调。

请根据需要更改URL、方法类型和回调。

$(document).ready(function() {
	var category = '';
  var state = '';
  var city = '';
  $("#category").on('change', function() {
    category = $("#category option:selected").text();
    // here you need to check if state or city is selected, you need to send those values as the data to your server
		ajax('https://jsonplaceholder.typicode.com/posts/1', 'GET', category, handleCategorySuccess, handleCategoryError)
  });
  
  $("#state").on('change', function() {    
    state = $("#state option:selected").text();    
    // here you need to check if category or city is selected, you need to send those values as the data to your server
		ajax('https://jsonplaceholder.typicode.com/posts/1', 'GET', state, handleStateSuccess, handleStateError)
  });
  
  $("#city").on('change', function() {
    city = $("#city option:selected").text();    
    // here you need to check if state or category is selected, you need to send those values as the data to your server
		ajax('https://jsonplaceholder.typicode.com/posts/1', 'GET', city, handleCitySuccess, handleCityError)
  });

});

var ajax = function(url, method, data, successCallBack, errorCallBack) {	
	$.ajax({
      type: method,
      url: url,
      data: data,
      dataType: 'json',
      cache: false,
      success: successCallBack,
      error: errorCallBack
  });
}

function handleCategorySuccess(response) {
	alert(response);
}

function handleCategoryError() {
	alert('error');
}

function handleStateSuccess(response) {
	alert(response);
}

function handleStateError() {
	alert('error');
}

function handleCitySuccess(response) {
	alert(response);
}

function handleCityError() {
	alert('error');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="category" id="category" class="chosen">
  <option value="0" default>category</option>
  <option value="1">Car</option>
  <option value="2">Van</option>
</select>

<select name="state" id="state" class="chosen">
  <option value="0" default>state</option>
  <option value="1">Any</option>
  <option value="2">other</option>
</select>

<select name="city" id="city" class="chosen">
  <option value="0" default>city</option>
  <option value="1">New york</option>
  <option value="2">Chicago</option>
</select>

<div id="searchresult"></div>