将文件加载到div而不删除内容

时间:2014-02-14 09:14:04

标签: jquery html

我正在尝试将文件加载到已存在内容的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>

1 个答案:

答案 0 :(得分:1)

.load()会覆盖当前div中可用于从其他页面动态加载内容的旧内容。要解决此问题而不是使用.load(),您可以使用$.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");
    });
});