HTML中的下拉列表数组

Question

如何动态更改下拉菜单的值。 在这种情况下：例如，我有一个下拉列表数组，上面有2个名称，如name1和name2，名称1具有等级，还有name2。

我想做的是更改具有名称值的第一个下拉列表，我希望第二个下拉列表根据他的成绩自动更改。 像：约翰-> 90保罗-> 80

请帮助我使用javascript查找数组的索引和下拉列表的选定值。 提前致谢。

<script>
function Change2(a){
var options1= document.getElementById('stuname[]').options;
var options2= document.getElementById('stugrade[]').options;

    for(i = 0; options1.length;i++){
        if(options1[i].selected == true){
            options2[i].selected = true;
        }
    }
} // what I want is, if I change the first dropdown in row 1, the 2nd dropdown should change too, and same in row 2.
</script>

<?php
$getlist= mysql_query("SELECT * FROM STUDENTS");
    while($row = mysql_fetch_assoc($getlist)){

        print "<select id = 'stuname[]' name = 'stuname[]' class = 'text4' onchange = 'Change2(this.value);'>";
            $getname = mysql_query("SELECT * FROM NAME");
            while($row = mysql_fetch_assoc($getname)){
                $name = $row['name'];   
                print "<option value = '$name'>$name</option>";
            }
        print "</select>";

        print"<select id = 'stugrade[]' name = 'stugrade[]' onchange = 'Change2(this.value);'>";?>
<?php
        $getgrade = mysql_query("SELECT * FROM GRADE");
        while($row = mysql_fetch_assoc($getgrade)){
            $grade = $row['grade']; 
            print "<option value = '$grade'>$grade</option>";
        }
        print "</select><br>";
    }

?> // heres my code.. edited

Answer 1

这是解决此类问题的常用方法，不同的是您需要相应地更改查询和名称

JS文件

$(document).ready(function(){
    getfirstSelect();
    })
    function getSecondSelect() {
        var firstDropDownSelectedID = $('#firstSelect option:selected').val();
        $.ajax({
            type: "POST",
            url: "getSecondDropDownOptions.php",
            data: "firstDropDownSelectedID="+firstDropDownSelectedID
        }).done(function (result) {
            //alert(result)
            $("#secondSeect").html(result);
        });
    }
    function getfirstSelect() {
        $.ajax({
            type: "POST",
            url: "getFirstDropDownOptions.php",
            data: {}
        }).done(function (result) {
            //alert(result)
            $("#secondSeect").html(result);
        });
    }

getSecondDropDownOptions.php

<?
$firstDropDownSelectedID = isset($_POST['firstDropDownSelectedID']) ? (int)$_POST['firstDropDownSelectedID'] : 0;
$list2 = mysql_query("SELECT * FROM LIST2 WHERE relatedid=".$firstDropDownSelectedID);
$returnString = "";
        while($row = mysql_fetch_assoc($list2)){
                $returnString.= "<option value = '".$row['grade']."' >".$row['grade']."</option>";
        }
print $returnString;
?>

getFirstDropDownOptions.php

<?

$list1 = mysql_query("SELECT * FROM LIST1 ");
$returnString = "";
        while($row = mysql_fetch_assoc($list1)){
                $returnString.= "<option value = '".$row['grade']."' >".$row['grade']."</option>";
        }
print $returnString;
?>

的HTML

<form name="formName">
<select name="firstSelect" id="firstSelect" onchange="updateSecondSelect()"></select>
<select name="secondSeect id="secondSeect" ></select>
</form>