Javascript show/hide not working in IE

JavaScript
1

I coded a JS show/hide script and its not working in IE for some reason. Here is the code:


<script type="text/javascript">
function show(id){
	getId = document.getElementById(id);
	getId.style.display = "";
}
function hide(id){
	getId = document.getElementById(id);
	getId.style.display = "none";
}
</script>
<select name="configType">
	<option value="0" onclick="hide(2);">Import</option>
	<option value="1" onclick="show(2);">Export</option>
</select>
<table>
	<tr style="display: none;" id="2">
		<td width="25%" align="right">
			<b>Extra Fields</b>
		</td>
		<td width="75%">
			<input type="text" id="add_field" value=""><button type="button" id="add_field_btn" href="#">Add Field</button>
		</td>
	</tr>
</table>

Does anyone know why? Thanks so much.

2

Hi.
Try this:


<script type="text/javascript">
function toggle(id) {
	var el = document.getElementById(id);
   el.style.display = (el.style.display != 'none' ? 'none' : '' );
}
</script>
<body>
<select name="configType" onChange="toggle('myId_2')">
	<option value="0">Import</option>
	<option value="1">Export</option>
</select>
<table>
<!--  // Id should begin with a letter not a number -->
	<tr style="display: none;" id="myId_2">
		<td width="25%" align="right">
			<b>Extra Fields</b>
		</td>
		<td width="75%">
			<input type="text" id="add_field" value=""><button type="button" id="add_field_btn" href="#">Add Field</button>
		</td>
	</tr>
</table>
</body>

Bye.

3

Hey whisher, thanks for the reply. I cant use a toggle show hide. Is there a way I can use your script with 2 functions? One for show and one for hide? Thanks again.

4

take a look http://www.lattimore.id.au/2005/07/01/select-option-disabled-and-the-javascript-solution/

a quick work around:


<script type="text/javascript">
/*
function toggle(id) {
	var el = document.getElementById(id);
   	el.style.display = (el.style.display != 'none') ? 'none' : '';
}
*/
function show(id){
	var getId = document.getElementById(id);
	getId.style.display = "";
}
function hide(id){
	var getId = document.getElementById(id);
	getId.style.display = "none";
}
function myTest(el){
	var optVal= el.options[el.selectedIndex].value;
	if(optVal==1){
		show('myId_2');
	}
	else{
		hide('myId_2');
	}

}
</script>
<body>
<select name="configType" onChange="myTest(this);">
	<option value="0">Import</option>
	<option value="1">Export</option>
</select>
<table>
<!--  // Id should begin with a letter not a number -->
	<tr style="display: none;" id="myId_2">
		<td width="25%" align="right">
			<b>Extra Fields</b>
		</td>
		<td width="75%">
			<input type="text" id="add_field" value=""><button type="button" id="add_field_btn" href="#">Add Field</button>
		</td>
	</tr>
</table>
</body>