フェッチデータAJAX経由し、その後は選択

Question

を使用してフィルタを適用する私は、3種類の選択メニューがあります：私はjqueryの上で使用することにより、「#searchresult」のデータをフェッチするために、AJAXを使用しています1.Category 2.State 3.City

をPHPでデータを送信するメソッドを変更します。

フェッチは適切に行われますが、1つの「選択」オプションに対してのみ有効です。

私が欲しいのは、ユーザーが別の「選択」オプションを変更したときに、現在の「#searchresult」フェッチされたデータが更新されるということです。 Like： "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形式でデータを送信しています。

おかげuser5745970 @

Answer 1

ここで私はあなたに何をすべきかのアイデアを与えるために作成されたサンプルフィドルです。フィドルへのリンクは以下の通りです

考えてみると、それぞれの選択に対して3つの異なる変更イベントがあり、サーバーへの呼び出しがトリガーされます。選択した場合、他の選択値をデータとして送信する必要があります。たとえば、カテゴリが選択されているときに都市を変更する場合は、カテゴリと都市の両方をサーバーに送信して応答を取得する必要があります。 3つのサーバー側の呼び出しがすべて同じJSON構造を返す場合、成功とエラーのコールバックは1つしかできません。

必要に応じて、URL、メソッドタイプ、コールバックを適宜変更してください。

$(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