Remove Options from a Select then Put Then Back

Functions that will allow you add/remove (show/hide) option elements within a select element.

HTML

<h1>Remove Options from a Select then Put Them Back</h1>
<form>
    <select id="testSelect" name="testSelect">
        <option value="1">One</option>
        <option value="2" class="two">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
    </select>
    <br />
    <button type="button" id="removeOddOptionsButton">Remove Odd</button>
    <button type="button" id="showAllOptionsButton">Show All</button>
</form>

CSS

body {
    background-color: #99bbbb;
}

JavaScript

console.clear();

function setOriginalSelect ($select) {
    if ($select.data("originalHTML") == undefined) {
        $select.data("originalHTML", $select.html());
    } // If it's already there, don't re-set it
}

function removeOptions ($select, $options) {
    setOriginalSelect($select);
    $options.remove();
}

function restoreOptions ($select) {
    var ogHTML = $select.data("originalHTML");
    if (ogHTML != undefined) {
        $select.html(ogHTML);
    }
}

var $testSelect = $('#testSelect');

$('#removeOddOptionsButton').click(function(){
    var $optionsToRemove = $testSelect.find('option:even');
    removeOptions($testSelect, $optionsToRemove);    
});

$('#showAllOptionsButton').click(function(){
    restoreOptions($testSelect);
});