How do I select a row in a table based on what ddl option is selected MVC?

Question

I have a table with a few rows of data. I would like to display a row based on what option is selected on the ddl. how do I do that?

<script type="text/javascript" language="javascript">
     function optionSelected() {
          alert('HELP!!');
     }
</script>
...
<select id="optionSelect" onchange="optionSelected()">
    <option id="1">1</option>
    <option id="2">2</option>
    <option id="3">3</option>
</select>
<br />
<table id="optionList">
    <tr><td id="1">Option 1 Selected</td></tr>
    <tr><td id="2">Option 2 Selected</td></tr>
    <tr><td id="3">Option 3 Selected</td></tr>
</table>

Answer 1

First I'd apply the handler using javascript rather than inline. Second, you don't say how you know which row goes with which element in the dropdown, so I'll assume it's the numeric value of the option. Note that the rows are counted from zero, whereas your options are numbered from one.

$('#optionSelect').change( function() {
     var val = int.Parse($(this).val(),10) - 1; // calculate row number

     $('#optionList').find('tr').hide() // hide all rows
                     .eq(val) // get the selected row
                     .show(); // and show it
});