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!

• javascript
• jquery
• html
• onchange

• Both Select Table... and Table 1 are using value="0" in your <option>s – Stephen P Commented Jul 23, 2012 at 17:24

3 Answers 3

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