0

我知道已经有很多关于 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="" 部分来做到这一点......有什么想法吗？

谢谢！

4

3 回答 3

2

如果你想使用 jQuery：

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

jsFiddle 示例

仅使用纯 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 示例

于 2012-07-23T17:25:28.730 回答
1

老实说，您不应该在 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();
    }
});
  • 优点：代码更明确。
  • 优点：select表的 s 和s 中的值id不必手动维护以随着代码的变化而随着时间的推移而匹配。
  • 缺点：添加新select值和新表意味着还需要修改此代码。
于 2012-07-23T17:27:18.047 回答
0 
$('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
});
于 2012-07-23T17:27:59.590 回答