如何根据下拉列表选择更改div中的内容 [英] How to change content in div, based on dropdown selection

问题描述

我的内容从我的 DB 中加载到我的div。

我有一个下拉菜单，我应该能够整理出内容，这意味着当下拉菜单被选中， div 中的旧内容被删除，新的出现。

那么怎么可以删除 div 中的旧内容，并根据下拉列表选择获得新内容？

这是我到目前为止：

 < div class =col-md-4> 
< ul class =nav nav-tabs top_nav> 
< li role =presentationclass =active>< a href =＃> Edit< / a>< / li> 
< li role =presentationclass =inactive> 
 
<！ - 应该分配下面的内容 - > 
<！ - 删除旧版，并选择新功能 - > 
 
< 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> 
 
<！ - 从DB加载内容，并显示 - > 
 
< div class =abo_loadid =abo_load> 
<？php 
 if（mysql_num_rows（$ sql_select_edit）> 0）{
 while（$ row = mysql_fetch_assoc（$ sql_select_edit））{
？> 
< div class =abo_boxid =abo_box> 
< label class =abo_navn><？php echo $ row ['abo_name']; ？>< /标签> 
< input type =hiddenvalue =<？php echo $ row ['category'];？> name =category/> 
< form action =conn / delete.phpmethod =post> 
< input type =hiddenvalue =<？php echo $ row ['id']; 
？> NAME = slet > 
< input class =deletevalue =Deletetype =submitonclick =return confirm（'Er du sikker ?? \\\
Det ville joværeÆVmed en Fejl 40！'）; > 
< / form> 
< label class =edit>编辑< / label> 
<？php include（files / edit_list_content.php）; ？> 
< / div> 
<？php 
} 
} 
？> 
< / div> 
< / div> 
  

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

解决方案

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

如果您使用jQuery，一些有用的功能将是： p>

Ajax： http：//api.jquery。 com / jquery.ajax /

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

这里给出了一个很好的实现示例：
https://stackoverflow.com/a/4910803/2004910

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

解决方案

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

这篇关于如何根据下拉列表选择更改div中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！