Results 1 to 4 of 4

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

  1. #1
    Join Date
    Jan 2007
    Posts
    58
    Thanks
    11
    Thanked 0 Times in 0 Posts

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

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    nicksalad (10-08-2009)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    nicksalad (10-08-2009)

  6. #4
    Join Date
    Jan 2007
    Posts
    58
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Default

    Thank you John, you rock!! Solved!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •