更改<div>上的动态<select>内容

Question

我想做的是: 1.)在第一次加载后显示在页面上。当用户选择一个或多个选项时，动态内容将加载到<div>中。

2.)在这个第一个动态<div>中，另一个php页面用更多的条目回显另一个php页面。

-直到现在，我的代码才能正常工作

3.)在第一个动态<select>中的第二个<div>中选择一个或多个选项之后，应该用另一个动态<div>打印第二个动态<div>。

但是，在从第二个动态中选择条目之后，第二个动态中没有显示任何内容。

第一批汽车，自行车，卡车，飞机……-我选择“汽车”-第一个动态<div>显示：<select>野马，克莱斯勒，吉普车等.-我选择克莱斯勒(直到这里我的代码工作良好)-第二个动态<div>显示:红色，白色，棕色，黄色，.

在浏览器中加载的“我的代码:页”：

<!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，它从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);  
?>

我试图将ajax代码复制到ajax_reload.php中，这样cod就会被回显到动态<div>中，但是没有响应.

知道吗？

非常感谢!

Answer 1

由于#Semester选择是动态添加的，因此需要使用事件委托：

$('#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);
        }
    });          
}); 

我假设您将<div id="Semester">重命名为<div id="SemesterDiv">，对于Tags DIV也是如此。