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 
});