在不刪除內容的情況下將文件加載到div

Question

我正在嘗試將文件加載到具有已存在內容的div中。但是當我加載文件時，div中的內容被刪除。我怎樣才能防止這一點？任何人都可以幫助我？代碼如下所示。

的jQuery：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.type_of_connection').change(function() { 

     var selected_value = $(this).val(); 
     $('.content').not("#" + selected_value).hide(); 
     $("#" + selected_value).fadeIn(); 

     $('.supercustomer').change(function() { 
      var supercustomer_id = $(this).val(); 

      $("#" + selected_value).load('show_switch.php', {supercustomer_id: supercustomer_id}); 
      ; 
     }); 
    }); 
}); 
</script> 

HTML

<div id="top_content"> 
    <div class="top_child"> 
     <h3>Faktureringsuppgifter:</h3> 
     <label name="firstname">Förnamn:</label> 
     <input type="text" name="firstname"> 
     <label name="lastname">Efternamn:</label> 
     <input type="text" name="lastname"> 
     <label name="personnmbr">Personnummer:</label> 
     <input type="text" name="personnmbr"> 
     <label name="address">Gatuadress:</label> 
     <input type="text" name="address"> 
     <label name="zip">Postnummer:</label> 
     <input type="text" name="zip"> 
     <label name="city">Postort:</label> 
     <input type="text" name="city"> 
     <label name="phone">Telefonnummer:</label> 
     <input type="text" name="phone"> 
     <label name="customernmbr">Kundnummer</label> 
     <input type="text" name="customernmbr"> 
    </div> 

    <div class="top_child"> 
     <h3>Uppkoppling</h3> 
     <label name="connection">Typ av uppkoppling:</label> 
     <select name="type_of_connection" class="type_of_connection"> 
      <option value="0">Ok&auml;nt</option> 
      <option value="nao_adsl">Adslkunder</option> 
      <option value="nao_lan">Lankunder</option> 
      <option value="ovriga_adsl">Övriga adsl</option> 
      <option value="stadsnat">Stadsnät</option> 
      <option value="tele">Telefoni</option> 
      <option value="mobilt">Mobilt</option> 
      <option value="tv">Tv</option> 
     </select> 
     <div class="content" id="nao_adsl"> 
     <h3>ADSL-uppgifter:</h3> 
      ADSL-tel:<input name="adsl_tel" type="text" id="adsl_tel"> 
      FB-nummer:<input name="fb" type="text" id="fb"> 
     </div> 
     <div class="content" id="nao_lan"> 
     <?php 
      include("sok.nao_lan2.php"); 
     ?> 
     </div> 
     <div class="content" id="ovriga_adsl"> 
      adsl 
     </div> 
     <div class="content" id="stadsnat"> 
     <label name="stadsnat">Stadsnät</label> 
     <select name="stadsnat" class="stadsnat_options"> 
     <?php 
     while($row=$link->get_object("SELECT net_lev_id, namn FROM stadsnat")) 
     { 
     ?> 
      <option value="<?= $row->net_lev_id ?>"><?= $row->namn ?></option> 
     <?php 
     } 
     ?> 
     </select> 
     </div> 
    </div> 

    <div class="top_child"> 
    </div> 
</div> 
<div id="bottom_content"> 
</div> 

Answer 1

是​​覆蓋在你想從其他頁面動態加載內容目前DIV可用的舊內容。爲了解決這個問題，而不是使用​​你可以利用的$.get()：

$(document).ready(function() { 
    var selected_value = ''; // <-----make a global var here 
    $('.type_of_connection').change(function() { 
     selected_value = $(this).val(); // <------update the value here 
     $('.content').not("#" + selected_value).hide(); 
     $("#" + selected_value).fadeIn(); 
    }); 

    $('.supercustomer').change(function() { 
     var supercustomer_id = $(this).val(); 
     $.get('show_switch.php', {supercustomer_id: supercustomer_id}, function(html){ 
      $("#" + selected_value).append(html); //<---append the html here. 
     }, "html"); 
    }); 
});