jQuery hide() and show() based on a select element.

**nicksalad** · 10-08-2009, 07:31 AM

Hello, I just want to know if this code can be improved, i made it kinda messing around with pieces of scripts i found here and there because I'm just a beginner with Javascript.

Code:

<HEAD>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	
	$("#bloc").change(function() {
	
	if ($("#bloc").val() == 2)
	{
		$("#bdays, #bdays2, #brea, #brea2").show("fast");
	}
	else
	{      
		$("#bdays, #bdays2, #brea, #brea2").hide();
	}
	
	});
	
	if ($("#bloc").val() == 2)
	{
		$("#bdays, #bdays2, #brea, #brea2").show("fast");
	}
	else
	{      
		$("#bdays, #bdays2, #brea, #brea2").hide();
	}
	
});
 </script>
</HEAD>
<BODY>
<select id="bloc">
<option value="1">Normal</option>
<option value="2">Blocked</option>
</select>

<table border="1">
	<tr>
		<td>value 1</td>
		<td>value 2</td>
	</tr>
	<tr>
		<td>
			<div id="bdays">
			Days:
			</div>
		</td>
		<td>
			<div id="bdays2">
			<input type="text" id="VIN" value="">
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<div id="brea">
			Reason:
			</div>
		</td>
		<td>
			<div id="brea2">
			<input type="text" id="VIN" value="">
			</div>
		</td>
	</tr>
</table>
</BODY>

So, basically what i want to do is, based on the value of the select, if "2" (blocked), to display the next 2 <tr's> with the lenght of the block and the reason. I know it's messy but it's the only way i found to do this with a table, other ways when enabling the 2 <tr> elements it made a mess with the table.

The bloc value is also read from a db, so it should check if 1 or 2 and act according to it's value on page load. And of course, when changed to hide it or show it.

Also i noticed on Firebug that when switching to 2, and showing the next 2 fields, it was adding a bunch of style lines at first, and then was ok, but i tested it on Google Chrome and it does a weird thing, the width of the table grows a lot for a second and then comes back to normal.

Any help would be much appreciated!
Thanks!.

**jscheuer1** · 10-08-2009, 12:07 PM

Mostly it's the animation that is messing with the table. If you get rid of that part of it, this works fine:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<HEAD>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	
	$("#bloc").change(function() {
	
	if ($("#bloc").val() == 2)
	{
		$(".larger").show();
	}
	else
	{      
		$(".larger").hide();
	}
	
	});
	
	$("#bloc").change();
	
});
 </script>
</HEAD>
<BODY>
<select id="bloc">
<option value="1">Normal</option>
<option value="2">Blocked</option>
</select>

<table border="1" width=250>
	<tr>
		<td width=60>value 1</td>
		<td>value 2</td>
	</tr>
	<tr class="larger">
		<td width=60>
			Days:
		</td>
		<td>
			<input type="text" id="VIN1" value="">
		</td>
	</tr>
	<tr class="larger">
		<td width=60>
			Reason:
		</td>
		<td>
			<input type="text" id="VIN2" value="">
		</td>
	</tr>
</table>
</BODY>

**jscheuer1** · 10-08-2009, 12:24 PM

Then again, if you have to have animation of some sort, try this out:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#tab {
 width: 15.9375em!important;
}
.td1 {
 width: 3.75em!important;
}
.td2 {
 width: 11.875em!important;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#bloc').change(function() {
		$('#tab').hide();
		if ($('#bloc').val() == 2){
			$('.larger').show();
		}
		else{      
			$('.larger').hide();
		}
		$('#tab').show('fast');
	});
	$('#bloc').change();
});
 </script>
</head>
<body>
<select id="bloc">
<option value="1">Normal</option>
<option value="2">Blocked</option>
</select>

<table id="tab" border="1">
	<tr>
		<td class="td1">value 1</td>
		<td class="td2">value 2</td>
	</tr>
	<tr class="larger">
		<td class="td1">
			Days:
		</td>
		<td class="td2">
			<input type="text" id="VIN1" value="">
		</td>
	</tr>
	<tr class="larger">
		<td class="td1">
			Reason:
		</td>
		<td class="td2">
			<input type="text" id="VIN2" value="">
		</td>
	</tr>
</table>
</body>

**nicksalad** · 10-08-2009, 12:28 PM

Thank you John, you rock!! Solved!

Thread: jQuery hide() and show() based on a select element.

Thread Tools

Search Thread

jQuery hide() and show() based on a select element.

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions