How to change content in div, based on dropdown selection

Question

I load my content from my DB with PHP, into my 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, and the new appears.

So how is it possible to "remove" the old content in the div, and get the new content based on the dropdown selection ?

This is what i got so far:

    <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>

EDIT: I have already made it with JQuery, i load a php page, that gets the selected item, and then get the data from the DB. But the problem is, that when its loaded, i can't use any JQuery to manipulate with the new content. Like i have a edit label on the content with a JQuery hide function on. That function is working when i get the data though php from my DB, but not when i get the data though JQuery load. Thats why i want to load the data though php

Answer 1

You need to bind change event on your dropdown & based upon selection, fire an ajax request to get related content & then upon receiving update content inside DIV.

If you are using jQuery, Some useful functions would be:

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

Binding event: https://api.jquery.com/change/

A good example of implementation has been given here: https://stackoverflow.com/a/4910803/2004910