Question

我想做什么： 1.）首次加载后显示在页面上。当用户选择一个或多个选项时，动态内容将加载到<div>

中

2。）在第一个动态<div>中，另一个php页面回显第二个进一步的条目。

---直到这里我的代码工作得很好---

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

但是从第二个选择条目后，第二个动态

显示

实施例： - 页面加载：第一辆汽车，自行车，卡车，飞机...... - 我选择“汽车” - 第一个动态<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中，以便将鳕鱼回显到动态<div>中，但没有响应......

任何想法？

非常感谢！

Answer 1

由于#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);
        }
    });          
});

我假设您将<div id="Semester">重命名为<div id="SemesterDiv">，同样适用于Tags DIV。

更改<select> </selected> </div>时的动态<div>内容

1 个答案: