show only certain options in a select dropdown

by mblase75

HTML

<form>
    <label>pick a number:
        <select multiple size="6" id="sel">
            <option class="odd">1</option>
            <option class="even">2</option>
            <option class="odd triple">3</option>
            <option class="even">4</option>
            <option class="odd">5</option>
            <option class="even triple">6</option>
            <option class="odd">7</option>
            <option class="even">8</option>
            <option class="odd triple">9</option>
            <option class="even">10</option>
            <option class="odd">11</option>
            <option class="even triple">12</option>
        </select>
    </label>
</form>
<a href="#" data-sel="even">Show evens</a>

<a href="#" data-sel="odd">Show odds</a>

<a href="#" data-sel="triple">Show triples</a>

JavaScript

$('#sel').data('options', $('#sel option').detach()); // jQuery object

$('a').on('click', function (e) {
    e.preventDefault();
    var $sel = $('#sel').data('options'),
        c = $(this).data('sel');
    $('#sel').empty().append( $sel.filter('.'+c) );
});