jQuery Extension - deselect

by Kyle Mitofsky

HTML

<button id='deselect' >Deselect</button>

<select class='selectbox'>
    <option>--------</option>
    <option selected='selected'>Number 1</option>
    <option>Number 2</option>
</select>








<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
                About this SO Question: <a href='http://stackoverflow.com/q/2390651/1366033'>set html select option with jquery</a><br/>
    jQuery API Documentation: <a href='http://api.jquery.com/jQuery.fn.extend/'>jQuery.fn.extend()</a>
<div>

CSS

button, select {
    display: block;
    width: 125px;
}

JavaScript

$.fn.extend({
    deselect: function() {
        this.filter("select").each(function() { 
            $("option", this)[0].selected = true;
        });
    }
});

$(function () {
    $("#deselect").click(function () {
        $(".selectbox").deselect()
    });
});