Reorder select options

by Dmytro Tsiniavskyi

HTML

<select size="10">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <span class="hidden"><option class="hidden" value="4">Four</option></span>
    <span class="hidden"><option class="hidden" value="5">Five</option></span>    
    <span class="hidden"><option class="hidden" value="6">Six</option></span>
    <span class="hidden"><option class="hidden" value="7">Seven</option></span>
    <span class="hidden"><option class="hidden" value="8">Eight</option></span>
    <option value="9">Nine</option>
    <option value="10">Ten</option>
</select>

<input type="button" value="Up" id="up"/>
<input type="button" value="Down" id="down"/>

CSS

.hidden{
    display: none;    
}

JavaScript

$('#up').click(function(){
    var option = $('select').children('option:selected');
    moveOption(option, true);
});

$('#down').click(function(){
    var option = $('select').children('option:selected');
    moveOption(option, false);
});

function moveOption(option, up) {
    if (up) {
        option.insertBefore(option.prev());
    } else {
        option.insertAfter(option.next());
    }
}