从属下拉列表仅适用于表中的单行

Hi I've created a dependent drop for my page. I have html table."parent_cat" is my first dropdown and "sub_cat" is my second one Inside this my 2nd dropdown appears. I'm facing a problem where dropdrown works perfectly fine for first row but doesnt work for rest of rows. I'm attaching the code.

嗨,我已经为我的页面创建了一个依赖删除。我有html表。“parent_cat”是我的第一个下拉列表,“sub_cat”是我的第二个下面。在这里我的第二个下拉列表出现。我遇到的问题是,dropdrown在第一行中运行得非常好,但对于其余行不起作用。我正在附上代码。

// Create connection
$conn = new mysqli($mysqlServerName, $username, $password, $dbname);
// Check connection
if ($conn->connect_error)
{
    die("Connection failed: " . $conn->connect_error);
}

$tags="SELECT * FROM categories";
$tag_list=$conn->query($tags);
echo "<form method='get'>";
echo "<select name='parent_cat' id='parent_cat' >";
echo "<option value = '' > Select tag :</option >";
while($tagrow = $tag_list->fetch_assoc()){
    echo  "<option value = '".$tagrow["id"]."' > ".$tagrow["category_name"]."</option >";
}
echo "</select>";
echo "</form>";
$server_list_query ="SELECT Longname FROM server_upgrade";
$server_list = $conn->query($server_list_query);

$sql = "SELECT Host_Id,Longname,Last_Upgrade_Time ,Installed_SW_Version ,Latest_Available_Version ,Instance_Type FROM server_upgrade order by Host_Id";

$result = $conn->query($sql);
if ($result->num_rows > 0) {

    $counter = $result->num_rows;

    // output data of each row
    while ($row = $result->fetch_assoc()) {

        $myLongname = $row['Longname'];
        $installedversion = $row["Installed_SW_Version"];
        $instancetype = $row["Instance_Type"];
        $Latest_Available_Version = $row["Latest_Available_Version"];
        //$myarray= split(',',$row["Latest_Available_Version"]);
        //$i=count($myarray);

        echo "<tr onclick='rowindex(this)'>";
        echo "     <td class='Longname'> <span id='" . $row["Longname"] . "'>" . $row["Longname"] . "</span></td>";
        echo "  <td>    <div id='" . $row["Last_Upgrade_Time"] . "'>" . $row["Last_Upgrade_Time"] . "</div></td>";
        echo "  <td>" . $row["Installed_SW_Version"] . "</td>";
        echo "  <td>" . $row["Instance_Type"] . "</td>";

        //echo "  <td>".$row['Latest_Available_Version']."</td>";
        echo "<form action=''>";
        echo "  <td>  <select name='sub_cat' id='sub_cat' onChange=checkThisvalue(this.value) >";
        echo "<option value = '' > Select tag :</option >";

        //for ($x = 0; $x <$i; $x++) {
        //  echo "<option value = '" . $myarray[$x] . "' > " . $myarray[$x] . "</option >";
        //}
        echo "</select></td>";
        echo " <div id='tagId'></div>";
        echo "</form>";

        if (!($installedversion == "Upgrade Started" || $installedversion =="setforupgrade"))
            echo "<td><a href='test_index.php?serverName=$myLongname'>Start</a>   </td>";
        else
            echo "<td>Upgrade ON</td>";

        echo "</tr>";


    }

}

else
{
    echo "0 results";
}
$conn->close();
?>
<script type="text/javascript">
    var row;
    function rowindex(x) {
        row = x.rowIndex;
    }
    function checkThisvalue(str) {

        if (str=="") {
            document.getElementById("tagId").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("tagId").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","saveindb.php?q="+str+"&r="+row,true);
        xmlhttp.send();
    }
    $(document).ready(function() {

        $("#parent_cat").change(function() {
            $(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
            $.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
                $("#sub_cat").html(data);
                $('#loader').slideUp(200, function() {
                    $(this).remove();
                });
            });
        });

    });


</script>

saveindb.php

$conn = new mysqli($mysqlServerName, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$tag = $_GET['q'];
$index=$_GET['r'];
//echo $tag;
//echo $index;
$sql = "UPDATE server_upgrade set Scheduled_Upgrade_Tag='" . $tag . "'where Host_Id='".$index."' ";

$result = $conn->query($sql);

1 个解决方案

#1

On dynamically created event $("#parent_cat").change not works. You have to use

在动态创建的事件$(“#parent_cat”)。更改不起作用。你必须使用

1) delegate event binding.

1)委托事件绑定。

//$("#parent_cat").change(function() {
//delegate event binding
$(document).on("#parent_cat","change",function(){
    //do here
});

or

2) Make a function

2)做一个功能

function parentCatChange(thisObj){

}

and call it from

并从中调用它

<select name='parent_cat' id='parent_cat' onchange="parentCatChange(this);">