PDA

View Full Version : 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.


<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:


<!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:


<!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!