Load file into div without removing the content

Question

i'm trying to load a file into a div, with already existing content. But when i'm loading the file, the content in the div is removed. How can I prevent this? Anyone who can help me? The code is shown below.

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

Yes .load() overwrites the old content available in the current div where you want to load your content dynamically from other page. To overcome this issue instead of using .load() you can make use of $.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");
    });
});