获取数据通过Ajax，然后使用应用过滤器选择

Question

我有3个不同的选择菜单：1.Category 2.State 3.City

我使用AJAX通过使用jQuery上获取的“#searchresult”数据改变在PHP上发送数据的方法。

正在进行提取，但只适用于一个“选择”选项。

我想要的是当用户更改另一个“选择”选项时，它将更新当前的“#searchresult”获取数据。 例如：假设在将“category”更改为“car”时，将“#searchresult”中的“cars”的所有数据提取到“state”更改为“new york”，然后更新“#searchresult”在纽约。

我尝试了很多不同的方法，比如使用多个if语句来查找select是否被选择，但是没有到达哪里。

在此先感谢。

我的代码是：

$(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);"> \t <div class="filter"></div> \t <span class="category">' + category + '</span> \t \t <div class="col align-self-end"> \t \t <p>' + response.contractor[i].first_name + '</p> \t \t <span>' + response.contractor[i].city_name + ',' + response.contractor[i].state_name + '</span> \t \t </div> \t <div class="slideup"> \t \t <p>More info?</p> \t \t <a href="' + response.contractor[i].url + '" class="btn">Profile</a> \t </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个成功和错误回调。

请相应地更改网址，方法类型和回调以符合您的需求。

$(document).ready(function() { 
 
\t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t ajax('https://jsonplaceholder.typicode.com/posts/1', 'GET', city, handleCitySuccess, handleCityError) 
 
    }); 
 

 
}); 
 

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

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

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

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

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

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

 
function handleCityError() { 
 
\t 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