根據下拉框選擇更新表格數據

Question

我有一個數據的html表格，每行有一個下拉框。如果用戶更改下拉框的值，我希望該行中的數據發生更改（基於數據庫調用以查找下拉框新值的關聯數據）。

作爲一個基本的例子，假設一個表格顯示了籃球隊的球員以及他們的身高。想象一下，玩家是從下拉框中選擇的......如果用戶使用下拉框更改該行中的玩家，我希望該玩家的高度在html表格中更改。例如，如果在下面的表格中，用戶將科比·布萊恩特的球員改爲其他球員（如雷·阿倫），那麼高度欄將根據雷阿倫身高的數據庫查詢而改變。

Player   Height 
[Kobe Bryant V] 6'6" 
[Dwyane Wade V] 6'4" 

我想這樣做使用jQuery或JavaScript。另外，我爲我的網站使用CakePHP，但如果這全部由jquery或javascript處理，則可能不相關。謝謝你的幫助！ Ryan

Answer 1

JQuery相當簡單。只需將一個onchange事件附加到下拉列表中，並使該事件發出一個AJAX/AJAJ請求，以便返回您需要的新HTML值。

<select id="player"> 
    <option value="KobeBryant">Kobe Bryant</option> 
    <option value="DwayneWade">Dwayne Wade</option> 
</select> 

和jQuery來發出請求（我使用JSON在這裏，你還可以使用XML）

$("#player").change(function (event) { 
    $.getJSON('player.php?player=' + $(this).val(), function (json) { 

      // Change data in the table 

    }); 
}); 

http://docs.jquery.com/Ajax/jQuery.getJSON

player.php需要在這種情況下返回JSON，基於你發送它的玩家。

http://www.json.org/example.html