动态 <div> 内容变化 <select>

Question

what i want to do: 1.) is shown on page after first load. 我要做什么：1.）在第一次加载后显示在页面上。 When an user selects one or multiple options dynamic content is loaded into a <div> 当用户选择一个或多个选项时，动态内容将被加载到<div>

2.) in this first dynamic <div> an other php page echos a second with further entries. 2）在此第一个动态<div> ，另一个php页面回显了另一个条目。

--- till here my code works just fine --- ---到这里我的代码工作正常-

3.) after selecting one or multiple options in this second <select> in the first dynamic <div> a second dynamic <div> should be printed with another <select> 3.）在第一个动态<div>的第二个<select>中选择一个或多个选项后，应使用另一个<select>打印第二个动态<div> <select>

But after selecting entries from second nothing is shown in second dynamic 但是从秒中选择条目后，第二个动态中没有显示任何内容

Example: - Page Load: First Cars, Bikes, Trucks, Planes... - I choose "Cars" - First dynamic <div> shows: <select> Mustang, Chrysler, Jeep, etc... - I choose Chrysler (till here my code works fine) - Second dynamic <div> shows: red, white, brown, yellow, ... 示例：-页面加载：第一辆汽车，自行车，卡车，飞机...-我选择“汽车”-第一个动态<div>显示： <select>野马，克莱斯勒，吉普车等...-我选择克莱斯勒（耕种在这里我的代码工作正常）-第二个动态<div>显示：红色，白色，棕色，黄色，...

My Code: Page which is loaded in browser: 我的代码：在浏览器中加载的页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<body>

<?
include_once('includes/functions.inc.php');
$conn = connection();

$sql = "SELECT * FROM Faecher WHERE Fach_Studienabschnitt = 1 ORDER BY Fachname ASC";
$sql_erg_VKH_Faecher = send_sql($sql);

mysql_close($conn); 
?>

<!-- the select -->
<select name="Fach[]" size="25" multiple="multiple" id="Fach">
    <?

        echo '<optgroup label="Vorklinik-Humanmedizin">';
        while($vkhfaecher = mysql_fetch_array($sql_erg_VKH_Faecher)){

            echo "<option value=".$vkhfaecher['Fach_ID'].">".$vkhfaecher['Fachname']."(".$faecher[$vkhfaecher['Fach_ID']]['Fragenanzahl'].")"."</option>";
        }
        echo '</optgroup>';

    ?>
</select>

<!-- the DIVs -->
<div id="Semester"></div>
<div id="Tags"></div>

<!-- the jQuery -->
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

$('#Fach').change(function(event) {
   var form_data = $('#Fach').serialize();
    $.ajax({
        url: "ajax_reload.php",
        type: "post",
        data: form_data,
        success: function(data){
            //adds the echoed response to our container
            $("#Semester").html(data);
        }
    });          
}); 

</script>

<script type="text/javascript">

$('#Semester').change(function(event) {
   var form_data = $('#Semester').serialize();
    $.ajax({
        url: "ajax_reload.php",
        type: "post",
        data: form_data,
        success: function(data){
            //adds the echoed response to our container
            $("#Tags").html(data);
        }
    });          
}); 

</script>

</body>
</html>

ajax_reload.php which dynamically loads content from mysql_db: ajax_reload.php从mysql_db动态加载内容：

<?
session_start();
include_once('includes/functions.inc.php');

$conn = connection();

if(isset($_POST['Fach'])){
foreach($_POST['Fach'] as $elem){
    $sql_fach_temp1 .= "T1.Fach_ID = ".$elem." OR ";        
    $sql_fach_temp2 .= "T2.Fach_ID = ".$elem." OR ";                
}
$sql_fach_temp1 = substr($sql_fach_temp1, 0, -4);
$sql_fach_temp2 = substr($sql_fach_temp2, 0, -4);   
$_SESSION['ajax_sql'] = "(".$sql_fach_temp1.") AND (".$sql_fach_temp2.")";

$sql = "SELECT DISTINCT T3.Semester,T3.Semester_ID FROM Fragen T1, Faecher T2, Semester T3 WHERE (".$sql_fach_temp1.") AND (".$sql_fach_temp2.") AND T1.Semester_ID = T3.Semester_ID";
$FaecherSemester_temp = send_sql($sql);

    echo '<select name="Semester[]" size="25" multiple="multiple" id="Semester">';
    while($semesterliste = mysql_fetch_array($FaecherSemester_temp)){
        echo "<option value=".$semesterliste['Semester_ID'].">".$semesterliste['Semester']."</option>";
    }   
    echo "</select>";

}

if(isset($_POST['Semester'])){
echo $_SESSION['ajax_sql']."ja";
foreach($_POST['Semester'] as $elem){
    $sql_semester_temp .= "T3.Semester_ID = ".$elem." OR ";             
}
$sql_semester_temp = substr($sql_semester_temp, 0, -4);

$sql = "SELECT DISTINCT T4.Tag, T4.Tag_ID FROM Fragen T1, Faecher T2, Semester T3, Tags T4, Frage_Tags T5 WHERE ".$_SESSION['ajax_sql']." AND (".$sql_semester_temp.") AND T1.Semester_ID = T3.Semester_ID AND T4.Tag_ID = T5.Tag_ID AND T1.Frage_ID = T5.Frage_ID";

$FaecherSemesterTags_temp = send_sql($sql);


    echo '<select name="Tags[]" size="25" multiple="multiple" id="Tags">';
    while($tagsliste = mysql_fetch_array($FaecherSemesterTags_temp)){
        echo "<option value=".$tagsliste['Tags_ID'].">".$tagsliste['Tags']."</option>";
    }   
    echo "</select>";
}



mysql_close($conn);  
?>

I tried to copy the ajax code into ajax_reload.php so that the cod is echoed into the dynamic <div> , but no response... 我试图将ajax代码复制到ajax_reload.php中，以便将鳕鱼回显到动态<div> ，但是没有响应...

any idea? 任何想法？

thanks a lot! 非常感谢！

Answer 1

Since the #Semester SELECT is added dynamically, you need to use event delegation: 由于#Semester SELECT是动态添加的，因此您需要使用事件委托：

$('#SemesterDiv').on("change", "#Semester", function(event) {
   var form_data = $('#Semester').serialize();
    $.ajax({
        url: "ajax_reload.php",
        type: "post",
        data: form_data,
        success: function(data){
            //adds the echoed response to our container
            $("#TagsDiv").html(data);
        }
    });          
});

I'm assuming you renamed <div id="Semester"> to <div id="SemesterDiv"> , and similarly for the Tags DIV. 我假设您将<div id="Semester">重命名为<div id="SemesterDiv"> ，并且类似地将Tags DIV重命名。

动态 <div> 内容变化 <select>

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-10-07 20:28:18

动态 <div> 内容变化 <select>

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-10-07 20:28:18

解决方案1
0 已采纳 2013-10-07 20:28:18