Selectbox with jQuery animation

red_ice

I have a select box which when an option is selected it will perform a jQuery .slideToggle(); animation

<select class="dropdown getgame" name="theServer">
	<option>Server</option>
	<option>Your server</option>
	<option>Our server</option>
</select>

There is a hidden field

$('#serverdetails').hide();

When 'Ourserver' is selected, it should trigger

$('#serverdetails').slideDown(200);

But for the life of me I cant get this working. I have it working with a checkbox

$("#checker").click(function()
{
      $('#serverdetails').slideToggle(200);
});

but for aesthetic reasons I have to make this a dropdown box.

Im sure it's a simple thing to get working, but I cannot find it anywhere and to be frank I'm fed up looking for this. So, I'm more or less asking for someone to flex their muscles and write the 3-5 lines of code that will do this for me as I'm at my whits end!! :pac:

Cheers

Giblet

What's the code for determining what dropdown option is selected (You should really have values for those options)

Aswerty

As Giblet says you need to identify the selection options.

With the following HTML:

<select id="pick-server" class="dropdown getgame" name="theServer">
    <option id="server">Server</option>
    <option id="your-server">Your server</option>
    <option id="our-server">Our server</option>
</select>

<div id="serverdetails">
    <p>Yoohoo!!</p>
</div>

And the following JQuery:

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

    $('#pick-server').on('change', function(){
        if($('#our-server').prop("selected")){
            $('#serverdetails').slideDown(200);       
        }        
    });
});

We can get Yoohoo!! to slid down when we select Our Server.

The prop http://api.jquery.com/prop/ and on http://api.jquery.com/on/ functions are particularly important in this case.