Question

  <div class="selCont">
        <h2>pick an option</h2>
        <select id="my-dropdown" name="my-dropdown">
            <option value="0">Please Select</option>
            <option value="1">West</option>
            <option value="2">Land</option>
            <option value="3">Easter</option>
            <option value="4">Springtime</option>
            <option value="5">Celtic</option>
            <option value="6">Spectacular/</option>
            <option value="7">Weekend</option>
            <option value="8">Dark</option>
            <option value="9">Treasures</option>
        </select>
        <button class="go-btn" type="submit">
        Go
        </button>
</div>

So basically i want to be able for a user to select an option, and upon hitting the go button, for a script to run and look at the value of the dropdown and use the value to send them to the relevant page.

I’ve been trying a few things but as of yet it’s not hanging together too well. Any help appreciated as always.

EDIT

http://jsfiddle.net/TmfyC/ – Here is what is what ive tried most recently with the help from one of the comments.

*WHAT I USED FOR PEOPLE WHO IT MIGHT BENEFIT*

$('.go-btn').click(function() {
    window.location = $('#my-dropdown').val();
});

This is what i ended up doing, i then assigned the value as the url of my pages. Seems to work like a treat. Thanks for the help guys.

Answer 1

2 things : http://jsfiddle.net/xSyF2/1/ OR http://jsfiddle.net/xSyF2/

code

$('.go-btn').click(function() {
    var selected = $('#my-dropdown option:selected');
    alert(" If you want text ==>"  + selected.html()); 
});​

OR

$('.go-btn').click(function() {
    alert(" If you just want value ==>"  + $('#my-dropdown').val()); 
});​