如何刪除以前的值並使用JavaScript從Json添加新值？

Question

我有這樣的HTML代碼部分

<div id="prt"> 
     <select name="selectPrt" class="span12" onchange="sta_callPRT();"> 
      <option value="noPrt">Choose one vehicle.</option> 
      <option value="prt1">PRT 1</option> 
      <option value="prt2">PRT 2</option> 
      <option value="prt3">PRT 3</option> 
      <option value="prt4">PRT 4</option> 
      <option value="prt5">PRT 5</option> 
     </select> 
     <div class="row-fluid"> 
     <div class="span6"> 
      <div class="section"> 
      <div class="sectionTitle"> 
       <h3>Vehicle Info</h3> 
      </div> 
      </div> 
<div id="state"><strong>State:</strong> </div> 
      <div id="freeSeats"><strong>freeSeats:</strong></div> 
      <div id="battery"><strong>battery:</strong></div> 
      <div id="totalDistance"><strong>totalDistance:</strong></div> 
      <div id="location"><strong>Location:</strong></div> 
      <div id="estimatedTime"><strong>estimatedTime"</strong></div> 
      <div id="estimatedDistance"><strong>estimatedDistance:</strong></div> 
      <div id="speed"><strong>speed:</strong></div> 

而且此Javascript

function sta_callPRT(){ 

    $.getJSON('PRTInfoGenerator.php', function(json){ 

     $.each(json, function(key, value) { 

     if(key=="state") { 
      //$('#state').empty(); 
      //document.getElementById("parameters").appendChild(divTag); 
      $('#state').append(value); 
         } 
     if(key=="freeSeats") { 
      $('#freeSeats').append(value); 
     } 
     if(key=="estimatedDistance"){ 
     $('#estimatedDistance').append(value); 
     } 
     if(key=="estimatedTime"){ 
     $('#estimatedTime').append(value); 
     } 
     if(key=="battery"){ 
     $('#battery').append(value); 
     } 
     if(key=="speed"){ 
     $('#speed').append(value); 
     } 
     if(key=="location"){ 
      $.each(json.location, function(par_key, par_value) { 

     $('#location').append(par_key+': '+par_value+' '); 
     }); 
     } 
     if(key=="totalDistance"){ 
     $('#totalDistance').append(value); 
     } 
    }); 

    }); 
    } 

我想在html.I隨機寫入車輛價值也有PHP代碼來產生vehicles.When我隨機值選擇一輛車，它會顯示一些數值，但在第二次選擇時，新數值將被添加到第一個數值的末尾。如何刪除以前的數值，並在新選擇時添加新數值？例如，這是網頁中的第一個選擇;

State: Running 
freeSeats:0 
battery:95 
totalDistance:8541 
Location:x: -5 y: 34 
estimatedTime:15 
estimetedDistance:809 
Speed:18 

這是第二個;

State: RunningRunning 
freeSeats:04 
battery:9540 
totalDistance:85411848 
Location:x: -5 y: 34 x: 84 y: -70 
estimatedTime:15269 
estimetedDistance:809513 
Speed:1818 

Answer 1

要清除的div每次...

function sta_callPRT(){ 
    $('#state, #freeSeats, #battery').empty(); 

    $.getJSON('PRTInfoGenerator.php', function(json){ 
      ... 

Answer 2

移動前綴文字的div外面像freeseats: <div id="freeSeats"></div>和 使用$('#freeSeats').text(value)代替$('#freeSeats').append(value); 追加將追加什麼已經存在，但文本將取代值來代替。

雖然您想使用$('#freeSeats strong')來更改強標記中的文本，但我建議您不要使用強標記並在div/div上使用樣式屬性。

這裏是你的更新代碼，然後：

<div id="prt"> 
      <select name="selectPrt" class="span12" onchange="sta_callPRT();"> 
      <option value="noPrt">Choose one vehicle.</option> 
      <option value="prt1">PRT 1</option> 
      <option value="prt2">PRT 2</option> 
      <option value="prt3">PRT 3</option> 
      <option value="prt4">PRT 4</option> 
      <option value="prt5">PRT 5</option> 
     </select> 
     <div class="row-fluid"> 
     <div class="span6"> 
      <div class="section"> 
      <div class="sectionTitle"> 
       <h3>Vehicle Info</h3> 
      </div> 
      </div> 
      State:<div id="state"></div> 
      freeSeats:<div id="freeSeats"></div> 
      battery:<div id="battery"></div> 
      totalDistance:<div id="totalDistance"></div> 
      Location:<div id="location"></div> 
      estimatedTime"<div id="estimatedTime"></div> 
      estimatedDistance:<div id="estimatedDistance"></div> 
      speed:<div id="speed"></div> 

和腳本：

function sta_callPRT(){ 

$.getJSON('PRTInfoGenerator.php', function(json){ 

    $.each(json, function(key, value) { 

    if(key=="state") { 
     $('#state').text(value); 
        } 
    if(key=="freeSeats") { 
     $('#freeSeats').text(value); 
    } 
    if(key=="estimatedDistance"){ 
    $('#estimatedDistance').text(value); 
    } 
    if(key=="estimatedTime"){ 
    $('#estimatedTime').text(value); 
    } 
    if(key=="battery"){ 
    $('#battery').text(value); 
    } 
    if(key=="speed"){ 
    $('#speed').text(value); 
    } 
    if(key=="location"){ 
     $.each(json.location, function(par_key, par_value) { 

    $('#location').text(par_key+': '+par_value+' '); 
    }); 
    } 
    if(key=="totalDistance"){ 
    $('#totalDistance').text(value); 
    } 
}); 

`