Create a cookie based on select menu option?

Question

I'm trying to create a select menu in a way that when users select an option and click on the continue button, a cookie is created with the contents of the option. The code directly below works, but it only creates the default "a" cookies rather than changing based on what option the user chooses.

<select id='select_letter'>
    <option>a</option>
    <option>b</option>
</select>

<a href='/' id='continue'><div id='continue_button'></div></a>

<script>
    $(document).ready(function(){
        var singleValues = $("#select_letter").val();
        $('#continue').click(function() {
            $.cookie("project", singleValues);
        })
    });
</script>  

I've tried to tie an onclick event to the continue button that gets whatever option has been selected, but it's been a fail. Any ideas? Thanks!

<script>
    $('option').live("click", function(){
        var singleValues = $("#select_letter").val();
        $('#continue').click(function() {
            $.cookie("project", singleValues);
        })
    });
</script>

Answer 1

You assign the selected value outside of the click event. You need to do it inside. You are storing the default value on load and then never updating it.

    var singleValues = $("#select_letter").val(); //I NEED TO BE INSIDE
    $('#continue').click(function() {
        $.cookie("project", singleValues);
    })

    $('#continue').click(function() {
        var singleValues = $("#select_letter").val();
        $.cookie("project", singleValues);
    })

Answer 2

In your select options, you are not assigning values.

e.g.

<select id='select_letter'>
    <option>a</option>
    <option>b</option>
</select>

should be

<select id='select_letter'>
    <option value="a">a</option>
    <option value="b">b</option>
</select>

example code: http://jsfiddle.net/AMefb/