私はajaxの変更機能を使用すると、私の前のデータは消えていません

Question

すべてのデータが正しく投稿されていて、ドロップボックスが機能しています。しかし、私は別の選択を行うとき、私はここで新しい選択を離れただけことが閲覧可能

を行くために、以前のデータをご希望の私のjavascriptです：

$.ajax({ 
url:'http://107.170.75.124/courts/courts.json', 
method: 'post' 
}) 
.done (function(data){ 
    data.forEach(function(item){ 
    console.log (item.county_name); 
     $ ('select').append('<option value="' + item.county_name + '">' + 
item.county_name + '</option>');  

}); 

$('select').on('change', function(item){ 
var answer = $(this).val(); 
$.ajax({ 
    url:'http://107.170.75.124/courts/courts.json', 
    method: 'post' 
}) 
.done(function(item){ 
    data.forEach(function(item){ 
     if (item.county_name === answer){ 
      console.log (item.court_name); 
       $ ('p').append (item.court_name + '</br>'); 
       $ ('p').append (item.address + '</br>'); 
       $ ('p').append (item.phone+ '</br>'); 



     } 
    }) 
}) 
}); 
}); 

Answer 1

.appendだけの要素を追加し、それはそれらに代わるものではありません。 。交換したい場合、あなたはアイテムが必要にfilter場合は、より明確に/良いかもしれないtarget.html(newStuff)または

data.forEach(function(item){ 
    var html = ''; 
    if (item.county_name === answer){ 
     console.log (item.court_name); 
     html += item.court_name + '</br>'; 
     html += item.address + '</br>'; 
     html += item.phone+ '</br>'; 
    } 
    $('p').html(html); 
}) 

target.replaceWith(newStuff)を使用する必要があり、その後map

var html = data.filter(function(item){ 
    return item.county_name === answer; 
}).map(function(item) { 
    return [item.court_name, item.address, item.phone].join('<br />'); 
}); 
$('p').html(html); 

Answer 2

は、私はあなたが.appendを変更する必要があると思います.htmlでデータを上書きします。

また、Array.prototype.filter()を使用することをおすすめします。このメソッドは、指定された関数によって実装されたテストに合格するすべての要素を含む新しい配列を作成します。この場合、同じ国名。

item.court_name + '</br>' + item.address + '</br>' + item.phone + '</br>';この式をArray.prototype.join()に置き換えることもできます。このメソッドは、配列（または配列のようなオブジェクト）のすべての要素を文字列に結合します。

var array = [item.court_name, item.address, item.phone]; 
array.join('<br />'); 

それとも：このよう

[item.court_name, item.address, item.phone].join('<br />');

$.ajax({ 
 
    url: 'http://107.170.75.124/courts/courts.json', 
 
    method: 'post' 
 
    }) 
 
    .done(function(data) { 
 
    data.forEach(function(item) { 
 
     //console.log(item.county_name); 
 
     $('select').append('<option value="' + item.county_name + '">' + 
 
     item.county_name + '</option>'); 
 
    }); 
 

 
    $('select').on('change', function(item) { 
 
     var answer = $(this).val(); 
 
     $.ajax({ 
 
      url: 'http://107.170.75.124/courts/courts.json', 
 
      method: 'post' 
 
     }) 
 
     .done(function(item) { 
 
      var html = data.filter(function(item) { 
 
      return item.county_name === answer; 
 
      }).map(function(item) { 
 
      console.log(item.court_name); 
 
      return [item.court_name, item.address, item.phone].join('<br />'); 
 
      }); 
 
      $('p').html(html); 
 
     }); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 

 
<p></p>