Using Select Box in ColorBox

Question

I'm using ColorBox to show a select box drop down of the US states in case the user forgot to enter a state before proceeding with his selection. I want him to choose the state and then make the flow continue. However, I can't get the value of his selection.

This is what I did:

I have this select control:

<select class="updateSearchButton"  id="colorBoxSelect">
     <option  value="">Please Select a State</option><option value="AL">Alabama</option>...<option value="WY">Wyoming</option>
</select>

And I have this ColorBox:

var $states = $('#colorBoxSelect');
            $.colorbox({
                html: $states,
                onClosed: function () {
                    goToResults(product, $('#colorBoxSelect').val());
                }
            });

The ColorBox opens and I see the select box just fine, but there is no value in

$('#colorBoxSelect')

An added bonus would be to be able to call "goToResults" upon a selection of a state, and not just on "onClosed", so I would get a better user experience.

I already tried wrapping the select box in a form, but no good.

Any help would be appreciated.

Answer 1

In case this helps anybody out there - I ended up doing it like this:

<div style='display:none'>
    <p><a class='inline' href="#colorBoxSelect"></a></p>    
    <select onchange="$('#State').val($(this).val()); goToResults();" id="colorBoxSelect">
        <option  value="">Please Select a State</option><option value="AL">Alabama</option>
        <option value="AK">Alaska</option>...<option value="WY">Wyoming</option>
    </select>
</div>

Also you'll need this:

$(".inline").colorbox({ inline: true, width: "20%" });

And last but not least - on the entry to the function where I check if the value is not there:

 if (!$('#State').val() || $('#State').val() == "") {
     $('.inline').click();  
 }

What happens is that I simulate a click on the "a" object. The href points to the select box element, which is then showed in the ColorBox. From there a simple assignment to the element I want to contain the value using an onChange gets the job done.

Answer 2

Im not shure I understand exactly what you mean but if there is no value in ('#colorBoxSelect').val()

You could try it like this:

$('#colorBoxSelect :selected').text();