Question

当我们从下拉列表中选择一个元素时，它将显示该元素的值，但在此之后，当我们从该下拉列表中选择下一个元素时，它必须显示前一个元素下面的值。

我已经完成了直到显示元素，但是当点击下一个元素时，第一个元素没有显示。

请帮我解决这个问题。我使用HTML，AJAX和PHP创建了我的代码。

<?php
    $q = intval($_GET['q']);
    $con = mysql_connect("localhost", "root", "", "registration");
    if (!$con)
    {
        echo "Connection Failed..";
        echo mysql_error($con);
    }
    $sql = "select * from dynamic where Id='".$q."'";
    $result = mysql_query($con, $sql);
    echo "<table border=3 bordercolor='pink' width=100 height=100>  
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Fathername</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Address</th>
        </tr>";
    while ($row = mysql_fetch_array($result))
    {
        echo "<tr>";
        echo "<td>".$row["Id"]."</td>"; 
        echo "<td>".$row["Name"]."</td>";
        echo "<td>".$row["Fathername"]."</td>";
        echo "<td>".$row["Age"]."</td>";
        echo "<td>".$row["Gender"]."</td>";
        echo "<td>".$row["Address"]."</td>";
        echo "</td>";
    }
    echo "</tables>";
    mysql_close($con);
?>

<html>
    <head>
        <script>
            function test(str) {
                if (str == "") {
                    document.getElementById("tst").innerHTML="";
                }
                else {
                    if(window.XMLHttpRequest) {
                        xml = new XMLHttpRequest();
                    } else {
                        xml = new ActiveXObject("Microsoft.XMLHttp");
                    }

                    xml.onreadystatechange = function() {
                        if (xml.readyState == 4 && xml.status == 200) {
                            document.getElementById("tst").innerHTML = xml.responseText;
                        }
                    }
                    xml.open("GET", "mysqlajax.php?q=" + str, true);
                    xml.send();
                }
            }
        </script>

    <body>
        <form>
            <select name="User" onchange="test(this.value)">
                <option value="">-Select user-</option>
                <option value="1">a</option>
                <option value="2">b</option>
                <option value="3">c</option>
                <option value="4">S</option>
                <option value="5">G</option>
                <option value="6">S</option>
            </select>
        </form><br>
        <b><div id="tst"></b></div>
    </body>
</html>

Answer 1

不要覆盖innerHTML，而是尝试附加到它。

尝试这样的事情：

HTML：

<html>
<head>
<script>

function test(str)
{

if(str=="")
{
document.getElementById("tst").innerHTML="";
}
else
{
if(window.XMLHttpRequest)
{
xml=new XMLHttpRequest();

}
else
{
xml=new ActiveXObject("Microsoft.XMLHttp");
}
xml.onreadystatechange=function()
{
    if(xml.readyState == 4 && xml.status== 200)
    {
    var innerHTML = document.getElementById("tst").innerHTML;
    innerHTML += xml.responseText;
    document.getElementById("tst").innerHTML=innerHTML;
    }
}
xml.open("GET","mysqlajax.php?q="+str,true);
xml.send();
}
}
</script>
<body>
<form>
<select name="User" onchange="test(this.value)">
<option value="">-Select user-</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">S</option>
<option value="5">G</option>
<option value="6">S</option>
</select>
</form><br>
<b>
<div id="tst"></div>
</body>
</html>

PHP：

<?php
$q=intval($_GET['q']);

//$con=mysql_connect("localhost","root","","registration");
//if(!$con)
//{
//echo "Connection Failed..";
//echo mysql_error($con);
//}
//$sql="select * from dynamic where Id='".$q."'";
//$result=mysql_query($con,$sql);

echo "<table border=3 bordercolor='pink' width=100 height=100>  
<tr>
<th>Id</th>
<th>Name</th>
<th>Fathername</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
</tr>";

//while($row=mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>".rand()."</td>"; 
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "</td>";
echo "</tr>";
}

echo "</table>";


//mysql_close($con);
?>

回复将是：

Screenshot

使用ajax将元素动态添加到表中

1 个答案: