2014-05-22 87 views
0

如何更改dinamically下拉列表的值。 這裏的情況下: 例如我有一個下拉列表,並有2個名字,就像名稱1和名稱2, 名稱1有分數和名稱2。html中的下拉列表數組

我想要做的是改變第一個下​​拉列表中有名字的值, 我希望第二個下拉列表根據他的等級自動更改。 像: 約翰 - > 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 
+1

凡定義的Change2功能?還是你問我們要定義它? –

+0

如果這應該在JavaScript中完成,爲什麼你要顯示生成頁面的PHP腳本,而不是瀏覽器中看到的HTML? –

回答

0

這是解決這類問題的常用方法,不同需要改變querys和名稱相應

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> 
+0

上面的代碼在第一行工作正常,當我嘗試選擇名稱時,它也改變了等級,但只在第一行。當我嘗試在第二行更改名稱時,它不會爲第二行的等級工作。 – man

+0

像:名稱[0] [0]工作正常,但在名稱[0] [1] ..名稱[0] [2]它不起作用。我想知道如何獲得選擇的列和行。謝謝 – man

+0

嗨。這是一個小錯誤,在一個PHP文件中有一個選項,請刪除選中的內容。我更新了我的答案,希望這對我有幫助 – volkinc