Question

我知道有许多onchange的例子，但我觉得我做错了，因为它们不起作用......

我有两张桌子，想根据他们从下拉菜单中选择的内容来显示一张。

<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

如果你想使用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 2

老实说，您不应将任何放在HTML元素的onchange属性中。最好将功能与标记分开。在页面的其他位置（或页面引用的单独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();
    }
});

Pro：代码更明确。
Pro：表格的select和id中的值不必手动维护，以便随着代码更改而随时间匹配。
Con：添加新的select值和新表意味着还需要修改此代码。

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

HTML onchange显示/隐藏表

3 个答案: