Onchange event to display a tr

This site is best viewed in a modern browser with JavaScript enabled.

ptri

Hello,

I have a query that is:
In this table code if selected option is 2 then only div tag should be displayed, else no display.
<table>
<tr>
<td>Select</td>
<td>
<select name="selection">
<option value=1>1</option>
<option value=2>2</option>
</select>
</td>
</tr>
<div id="div1">
<tr>
<td>Name</td>
<td><input type="text" size="20"></td>
</tr>
</div>
</table>

nap0leon

Improper HTML - so I don't know if any solution would be cross-browser compliant...

step 1: update your style sheet so that div1 is hidden by default
e.g.,
#div1 {display:none;}

step 2: add an onchange handler to your <select> and give it an ID
e.g.
<select name="selection" id="selection" onchange="checkToSeeIfIShouldShowRow1()">

step 2: write your javascript function for checkToSeeIfIShouldShowRow1
e.g.
function checkToSeeIfIShouldShowRow1() {
var selectedValue = document.getElementById('selection').value
if (selectedValue == '2'){
document.getElementById('div1').style.display='inline'
}
}