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

Javascript or jQuery library might be able to help you. `onChange()` — Logan Wayne, Jun 11 '15 at 08:00
yes it is posible eg ajax or oldschool onchange submit each time — donald123, Jun 11 '15 at 08:01
Related question - http://stackoverflow.com/questions/4888910/changing-the-contents-of-a-div-using-a-dropdown-javascript-and-php?rq=1 — web-nomad, Jun 11 '15 at 08:04
possible duplicate of [Change content of a div using JavaScript](http://stackoverflow.com/questions/2186041/change-content-of-a-div-using-javascript) — Logan Wayne, Jun 11 '15 at 08:09
i find your question a bit unclear... you are posting and re-loading your page anyway. You are getting your content with PHP. so, all you need is to print/echo the result? — Burki, Jun 11 '15 at 08:10
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. — Patrick R, Jun 11 '15 at 08:40

score 3 · Accepted Answer · edited May 23 '17 at 12:25

3

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

edited May 23 '17 at 12:25

Community

1
1

answered Jun 11 '15 at 08:07

Apul Gupta

3,044
3
22
30

Thanks. Found out though one of the links, that it was my load() that was the problem. I needed to set the functions in the callback to get it to work. So it's all working just fine now. – Patrick R Jun 11 '15 at 09:18

How to change content in div, based on dropdown selection

1 Answers1

Linked