Question

I am having a form and I would like to change it’s contents based on the selected value of a drop down list. All the following will be used in a PHP file.

It looks like this:

<style type="text/css">
.hide {
 display:none;
}

<select>
<option value="" >Please select product below</option>
<option value="pro1">Product 1</option>
<option value="pro2">Product 2</option>
</select>

<div id="pro1" class="hide" >Product 1</div>
<div id="pro2" class="hide" >Product 2</div>

A suggested solution is the following

You can use the slideUp() and slideDown built-in effect.

Or any of the other built-in effects for jQuery. http://api.jquery.com/category/effects/

$(document).ready(function () {    
       $("#selectMenu").bind("change", function () {
        if ($(this).val() == "pro1") {
            $("#pro1").slideDown();
            $("#pro2").slideUp();
        }
        else if($(this).val() =="pro2") {
            $("#pro2").slideDown();
            $("#pro1").slideUp();
        }
    });
});

HTML

<select id="selectMenu"> 
    <option value="" >Please select product below</option> 
    <option value="pro1">Product 1</option> 
    <option value="pro2">Product 2</option> 
</select> 

My questions are How can I add the slideup/down script AND is there any other way to handle this?

Thank you!

Answer 1

My questions are How can I add the
slideup/down script AND is there any
other way to handle this?

If you make a convention that your <option/> value is the same as the id of the div you want to show, then you could alter your change event to look like this:

$("#selectMenu").bind("change", function() {
    $(".hide").slideUp().filter("#" + $(this).val()).slideDown();
});

Example on jsfiddle.