從下拉列表中選擇所選值後顯示錶格（HTML）

Question

我需要在用戶從下拉列表中選擇所選值後顯示一個表格。我試圖在互聯網上搜索編碼的例子，但我沒有找到任何。我的編碼如下：

<select name="ddlEqu" size="1" tabindex="1" onchange="select(this.value)" id="Equddl_source"> 
    <option selected value="select"><--Select--></option> 
    <option value="D1">T-Shirt</option> 
    <option value="D2">Jacket</option> 
    <option value="D3">Shoes</option> 
</select> 

如果用戶選擇T恤，T恤的列表將以表格形式顯示。就像這樣：

ID | T-Shirt  | Description | Price 
1  | Mickey Mouse | Color = Black | RM 29.90 
2  | Camera Shirt | Color = Pink | RM 32.50 
3  |    |  = White | 

有人能幫助我，請...

Answer 1

使用jQuery，如果你能。然後，您可以輕鬆地提取數據或執行其他任何操作。你甚至不需要做select（this.value），只需創建一個名爲「ItemSelectedEvent」的函數即可。

var id = 0; 

//This uses jquery 
function ItemSelectedEvent 
{ 
     id++; 
    if($(#Equddl_source).val() == "D1") //Might also try for example (.val() == "Jacket") 
    { 
     $(#TableName).append("<tr><td>" + id + " | " + $(#Equddl_source).val() + " | </td></tr>"); 
    } 
} 

這只是一個非常難看又快速的例子，只是展示了你可能會看到的東西。你想要的是在谷歌肯定，只是不斷嘗試。這應該給你足夠的跳躍開始。

Answer 2

我希望你必須加載頁面加載的所有表格。假設您有3個隱藏的表，分別爲ID爲table_D1，table_D2和table_D3的項D1，D2和D3。如果表格尚未加載，那麼您應該可以通過AJAX獲取數據

$('#Equddl_source').change(function() { 
    $('#table_' + this.value).show();  
});