如何根据下拉选择更改 div 中的内容

Question

我使用 PHP 从我的 DB 加载我的内容到我的 div。

I have a dropdown above it, where i should be able to sort out the content, meaning that when dropdown is chosen, the old content in the div is removed ，然后出现新的。

那么如何才能"remove"div中的旧内容，并根据dropdown selection得到新的内容呢？

这是我目前得到的：

    <div class="col-md-4">
          <ul class="nav nav-tabs top_nav">
            <li role="presentation" class="active"><a href="#">Edit</a></li>
            <li role="presentation" class="inactive">

              <!-- THE DROPDOWN THAT SHOULD SORT THE CONTENT BELOW -->
              <!-- REMOVE OLD, AND GET NEW AFTER SELECTED -->

                <select id="filter_type">
                    <option selected value="Alle">Alle</option>
                    <option value="Privat_Tale">Privat Tale</option>
                    <option value="Erhverv_Tale">Erhverv Tale</option>
                    <option value="Gamle">Gamle</option>
                    <option value="Privat_MBB">Privat MBB</option>
                    <option value="Erhverv_MBB">Erhverv MBB</option>
                    <option value="Familietele">Familietele</option>
                    <option value="Retention">Retention</option>
                </select>
            </li>
          </ul>

  <!-- LOAD THE CONTENT FROM DB, AND SHOW IT -->

            <div class="abo_load" id="abo_load">
            <?php
if (mysql_num_rows($sql_select_edit) > 0) {
    while ($row = mysql_fetch_assoc($sql_select_edit)) {
?>
        <div class="abo_box" id="abo_box">
         <label class="abo_navn"><?php echo $row['abo_name']; ?></label>
         <input type="hidden" value="<?php echo $row['category']; ?>" name="category" />
         <form action="conn/delete.php" method="post">
          <input type="hidden" value="<?php echo $row['id'];
?>" name="slet">
          <input class="delete" value="Delete" type="submit" onclick="return confirm('Er du sikker??\nDet ville jo være ÆV med en Fejl 40!');">
         </form>
         <label class="edit">Edit</label>
         <?php include("files/edit_list_content.php"); ?>                                                       
       </div>                            
      <?php
    }
}
?>
            </div>
      </div>

编辑： 我已经用 JQuery 实现了，我加载了一个 php 页面，该页面获取所选项目，然后从数据库中获取数据。但问题是，加载后，我无法使用任何 JQuery 来处理新内容。就像我在内容上有一个带有 JQuery 隐藏功能的编辑标签。当我通过 php 从我的数据库中获取数据时，该功能有效，但当我通过 JQuery 加载获取数据时，该功能无效。这就是为什么我想通过 php

加载数据

Answer 1

您需要在下拉列表中绑定 change 事件，并根据选择触发 ajax 请求以获取相关内容，然后在 DIV 中收到更新内容。

如果您使用 jQuery，一些有用的函数将是：

Ajax: http://api.jquery.com/jquery.ajax/

绑定事件：https://api.jquery.com/change/

这里给出了一个很好的实施示例：

如何根据下拉选择更改 div 中的内容

How to change content in div, based on dropdown selection

html

php

mysql

drop-down-menu