Question

如何以动态方式更改下拉列表的值。这里的情况：例如，我有一个下拉列表，并有2个名称，如name1和name2，名称1有等级，也有名称2.

我想要做的是更改第一个具有name和value值的下拉列表我想根据他的成绩自动进行第二次下拉更改。喜欢：约翰 - ＆gt; 90 保罗 - ＆gt; 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>

html中的下拉列表数组

1 个答案: