JavaScript is disabled!

selectNav

selectNav();

This jQuery plugin adds a selectNav() method that adds auto submit behaviour to select boxes, for navigational use. Works with keyboard too. Works in IE 6+, Firefox 2+, Safari 3 and Opera 9+, but could use some fine tuning for Safari.

Returns

jQuery object

Requirements

The select box needs te be contained by a form element, at any level.

DOM alterations

This method adds the following hooks:

  • on parent of select box:
    .jsSelectNav

Accessibility

Make sure the form, which contains the select box, also contains a submit button. That way it's still possible to submit the form, even if JavaScript is disabled. Using the className "jsSelectNav" this submit button can be hidden easily (see example) and the select box can even be made wider to fill the gap left by the hidden button.

Examples

<form action="#" method="post">
    <fieldset>
        <legend>Interests</legend>
        <label for="interests">What's your main interest?</label>
        <select id="interests" name="interests">
            <option value=""></option>
            <option value="music">Music</option>
            <option value="theater">Theater</option>
            <option value="cinema">Cinema</option>
            <option value="games">Games</option>
        </select>
        <input type="submit" id="submitInterests" value="Go">
    </fieldset>
</form>

Here $("#interests").selectNav(); will make the select box auto submit the form as soon as it's value is altered (and not empty). The altered DOM will look like this:

<form action="#" method="post">
    <fieldset class="jsSelectNav">
        <legend>Interests</legend>
        <label for="interests">What's your main interest?</label>
        <select id="interests" name="interests">
            <option value=""></option>
            <option value="music">Music</option>
            <option value="theater">Theater</option>
            <option value="cinema">Cinema</option>
            <option value="games">Games</option>
        </select>
        <input type="submit" id="submitInterests" value="Go">
    </fieldset>
</form>

The className that is added can be used like this in CSS:

.jsSelectNav input#submitInterests {
    display: none;
}

Downloads

jquery.selectnav-0.1.7.js (1.16kB)

Versions