Tableau de la liste déroulante en html

Question

Comment modifier la valeur de la liste déroulante dinamiquement. ici le cas: par exemple j'ai un tableau de liste déroulante et a 2 noms dessus, comme name1 et name2, le nom 1 a le grade et aussi le name2. Ce que je veux faire est de changer la première liste déroulante qui a la valeur de nom et je veux que la deuxième liste déroulante change automatiquement selon sa catégorie. comme: John -> 90 Paul -> 80

s'il vous plaît aidez-moi à trouver l'index de tableau et la valeur sélectionnée de la liste déroulante en utilisant javascript. Merci d'avance.

<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

Ceci est une approche commune pour résoudre ce genre de problèmes, vous devez changer différemment querys et les noms en conséquence

fichier 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>