html中的下拉列表数组

Array of drop down list in html

本文关键字：数组 下拉列表 html      更新时间：2023-09-26

如何动态更改下拉列表的值。案例如下:例如，我有一个下拉列表数组，其中有两个名称，比如name1和name2，名称1有grade，名称2也有。

我想做的是改变第一个下拉菜单，它的值是name和我想让第二个下拉菜单根据他的成绩自动改变。如:约翰-> 90

请帮我找到数组的索引和下拉菜单的选择值使用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

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

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;
?>

相关文章：