javascript - HTML onchange showhide table - Stack Overflow

I know there are many examples of onchange already, but I feel like I'm doing something wrong as t

I know there are many examples of onchange already, but I feel like I'm doing something wrong as they do not work...

I have two tables and want to show one depending on what they choose from the dropdown menu.

<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>

Tables

<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> 

What should I place in the onchange section so that it shows the table that is chosen?

I am using jQuery as well, and know that I can call the show() and hide() functions of that but somehow I don't know how I would do that with the onchange="" part... any ideas?

Thank you!

I know there are many examples of onchange already, but I feel like I'm doing something wrong as they do not work...

I have two tables and want to show one depending on what they choose from the dropdown menu.

<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>

Tables

<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> 

What should I place in the onchange section so that it shows the table that is chosen?

I am using jQuery as well, and know that I can call the show() and hide() functions of that but somehow I don't know how I would do that with the onchange="" part... any ideas?

Thank you!

Share Improve this question asked Jul 23, 2012 at 17:21 user1530318user1530318 27.8k15 gold badges40 silver badges48 bronze badges 1
  • Both Select Table... and Table 1 are using value="0" in your <option>s – Stephen P Commented Jul 23, 2012 at 17:24
Add a ment  | 

3 Answers 3

Reset to default 2

If you want to use jQuery:

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

jsFiddle example

With just plain 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

Honestly, you shouldn't put anything in the onchange attribute of the HTML element. It's better to separate your functionality from your markup. Elsewhere in the page (or in a separate JavaScript file referenced by the page) you can bind to the change event:

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

Edit: For clarity, the last line is using the value from the select as part of the target table's id. This is based on the assumption that the two will always be correlated, but I suppose I'm not in a position to accurately make that assumption. A more explicit approach would be this:

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

    if (tableValue == 1) {
        $('#t1').show();
    } else if (tableValue == 2) {
        $('#t2').show();
    }
});
  • Pro: The code is more explicit.
  • Pro: The values in the select and the ids of the tables don't have to be manually maintained to match over time as code changes.
  • Con: Adding new select values and new tables means also needing to modify this code.
$('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
});

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745640313a4637651.html

相关推荐

  • javascript - HTML onchange showhide table - Stack Overflow

    I know there are many examples of onchange already, but I feel like I'm doing something wrong as t

    22天前
    60

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信