Question

Newbie Question:

In jQuery how would I make the browser navigate to the selected drink when selected?

<select name="selDrink" id="selDrink">
    <option value="http://coke.com">Coke</option>
    <option value="http://pepsi.com">Pepsi</option>
</select>

Answer 1

//select the element and bind a `change` event handler to it
$('#selDrink').on('change', function () {

    //redirect the user to the value of the select element
    window.location = this.value;
});

You will probably want to have a blank <option> at the top so all the <option>s with actual values will be selectable:

HTML —

<select name="selDrink" id="selDrink">
    <option value="">Choose One</option>
    <option value="http://coke.com">Coke</option>
    <option value="http://pepsi.com">Pepsi</option>
</select>

JS —

$('#selDrink').on('change', function () {

    //check if the selected value of this element is blank, if not then redirect to the value
    if (this.value != '') {
        window.location = this.value;
    }
});

Note that .on() is new in jQuery 1.7 and in this case is being used like .bind().

Here is a demo: http://jsfiddle.net/Duanx/

Docs for window.location: https://developer.mozilla.org/en/DOM/window.location