Jquery .hide help

JavaScript
1

Hello all,

I am trying to have certain parts of a form hidden unless a user selects a specific option from a drop down menu.

So far, I have used jquery and reached a point where it is hidden when the page loads, but appears no matter which option is selected from the menu.

I would like it also to hide again if a different option is selected, and the other options form will show.

I think I am just about there, but maybe making some small errors (i hope). Any help would be appreciated.

Here is what I have so far. Thanks!


<label for="subject">Subject:</label>
<select id="subject" name="subject" size="1">
<option>Select One</option>
<option>General Question/Comment</option>
<option value="sched">Schedule a Multimedia Pickup</option>
<option>Payments/Billing</option>
<option>Computer Service</option>
<option value="mmserv">Multimedia Service</option>
<option>Forensic Service</option>
<option>Other</option>
</select>


<p id="schedule">
		<label for="tapeQty">How many tapes do you have?</label>
		<input type="int" id="tapeQty" name="tapeQty" /><br />
</p>



 $(document).ready(function()
	 {
	    $('p#schedule').hide();
		$('#subject').change(function()
			{
				var val = $('sched :selected').val();
				$('p#schedule').slideDown('slow');
			});
			 
	 });
2

The method .[B]change/B automatically grabs the selectedIndex of the select box so you should be able to simply use $(this) instead of what you have now

var val = $(this).val();

To check the value i would simply use a shorthand IF statement

$(document).ready(function() {
    $('p#schedule').hide();

    $('#subject').change(function() {
        var val = $(this).val();
        var hide = (val == 'sched') ? false : true;
        (hide == true) ? $('p#schedule').slideUp('slow') : $('p#schedule').slideDown('slow');
    });
 });
3

Thank you so much!! It worked perfectly. Have a great night!!! :smiley:

4

Your very welcome

5

At first I was upset at seeing the ternary operator used to perform different statements, instead of being used to assign different values, but then thought of a way to simplify things instead:

$(‘p#schedule’)(hide == true) ? slideUp : slideDown;

That might be a bit to complex though, so a simpler solution could be:


var slideAction = (hide == true) ? slideUp : slideDown;
$('p#schedule')[slideAction]('slow');