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

Question

我有 3 个不同的选择菜单:1.类别 2.州 3.城市

我正在使用 ajax 通过在 PHP 上发送数据的更改方法上使用 jquery 来获取“#searchresult”上的数据。

提取工作正常，但仅适用于一个“选择”选项。

我想要的是当用户更改另一个“选择”选项时，它将更新当前的“#searchresult”获取的数据。例如:假设将“类别”更改为“汽车”，它会获取“#searchresult”上“汽车”的所有数据，现在将“州”更改为“纽约”，它会更新“#searchresult”在纽约。

我尝试了许多不同的方法，例如使用多个 if 语句来查找选择是否被选择，但没有达到任何目的。

提前致谢。

我的代码是:

$(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 这是我创建的示例 fiddle ，目的是让您了解需要做什么。 fiddle 的链接如下

这个想法是为每个选择提供 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>

JSFiddle