HTML的onchange顯示/隱藏表

Question

我知道有平變化的例子很多了，但我覺得我做錯了什麼，因爲他們沒有工作...

我有兩個表，並想展示一個取決於他們從下拉菜單中選擇什麼。

<select name="test" id="test" onchange="" size="1"> 
    <option value="0">Select Table...</option> 
    <option value="1">Table 1</option> 
    <option value="2">Table 2</option> 
</select> 

表

<table id = "t1" border="1"> 
<tr> 
<th>Header 1</th> 
<th>Header 2</th> 
</tr> 
<tr> 
<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 
<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
</tr> 
</table> 

<table id = "t2" border="1"> 
<tr> 
<th> 1</th> 
<th> 2</th> 
</tr> 
<tr> 
<td> 1, 1</td> 
<td> 1, 2</td> 
</tr> 
<tr> 
<td> 2, 1</td> 
<td> 2, 2</td> 
</tr> 
</table> 

我應該放置在Onchange部分，以便它顯示了選擇的表？

我也在使用jQuery，並且知道我可以調用show（）和hide（）函數，但不知何故我不知道如何使用onchange =「」部分來做這件事......有任何想法嗎？

謝謝！

Answer 1

老實說，你不應該在onchange屬性的HTML元素中加入任何。最好將你的功能與標記分開。在亞洲其他頁面（或在該網頁引用一個單獨的JavaScript文件），你可以綁定到更改事件：

$('#test').change(function() { 
    $('#t1,#t2').hide(); 
    var tableValue = $(this).val(); 
    $('#t' + tableValue).show(); 
}); 

編輯：爲了清楚起見，最後一行是使用從select值作爲部分的目標表的id。這是基於假設這兩個將始終相關，但我想我不能準確地做出這一假設。更明確的方法是這樣的：

$('#test').change(function() { 
    $('#t1,#t2').hide(); 
    var tableValue = $(this).val(); 

    if (tableValue == 1) { 
     $('#t1').show(); 
    } else if (tableValue == 2) { 
     $('#t2').show(); 
    } 
}); 

• 臨：的代碼更加明確。
• 專業版：表中的select和id中的值無需手動維護以隨着代碼更改隨着時間的推移而匹配。
• Con：添加新的select值和新表格意味着也需要修改此代碼。

Answer 2

如果你想使用jQuery：

$('#test').change(function() { 
    $('#t1,#t2').hide(); 
    $('#t' + $(this).val()).show(); 
}) 

jsFiddle example

只需普通的JavaScript：

var opt = document.getElementById('test'); 
opt.onchange = function() { 
    document.getElementById('t1').style.display = 'none'; 
    document.getElementById('t2').style.display = 'none'; 
    document.getElementById('t' + this.value).style.display = ''; 
}​ 

jsFiddle example

Answer 3

$('select#test').on('change', function() { 
    var _tableID = $(this).val(); 

    $('table[id^="t"]').hide(); // assuming they all start with #id t then a # 
    $('#t' + _tableID).show(); // make sure the values in the select options line up 
});