Toggle Dropdown Options

See: https://github.com/glittle/sunwapta.jquery.toggleOption#toggle-dropdown-options

HTML

<h1>jQuery Plugin: <a href="http://plugins.jquery.com/sunwapta.toggleOption/" target=_blank>Toggle Dropdown Options</a></h1>
<h2>Colors</h2>
<select id="colors" size=5>
<optgroup label="A" />
    
      <option value="red">Red</option>
      <option value="green">Green</option>
      <optgroup label="B" />
      <option value="blue">Blue</option>
    </select>

<div>
<button type=button onclick="$('#colors').hideOption('green')">Hide Green</button>
<button type=button onclick="$('#colors').showOption('green')">Show Green</button>
<button type=button onclick="$('#colors').toggleOption('green')">Toggle Green</button>
<button type=button onclick="$('#colors').toggleOption('green', true)">Toggle Green True</button>
<button type=button onclick="$('#colors').toggleOption('green', false)">Toggle Green False</button>
</div>
<div>
<button type=button onclick="$('#colors').hideOption('red')">Hide Red</button>
<button type=button onclick="$('#colors').showOption('red')">Show Red</button>
<button type=button onclick="$('#colors').toggleOption('red')">Toggle Red</button>
</div>
<div>
<button type=button onclick="$('#colors').hideOption('blue')">Hide Blue</button>
<button type=button onclick="$('#colors').showOption('blue')">Show Blue</button>
<button type=button onclick="$('#colors').toggleOption('blue')">Toggle Blue</button>
</div>


<div>
<button type=button onclick="$('#colors').hideOption('')">Hide "Choose"</button>
<button type=button onclick="$('#colors').showOption('')">Show "Choose"</button>
<button type=button onclick="$('#colors').toggleOption('')">Toggle "Choose"</button>
</div>

CSS

div{margin: 1em 0}
option[value=green]{background-color: #aaffaa}
option[value=red]{background-color: #ffaaaa}
option[value=blue]{background-color: #aaaaff}
h1{font-size: 120%}

JavaScript

(function ($) {
  $.fn.toggleOption = function (value, show) {
    /// <summary>Show or hide the desired option</summary>
    return this.filter('select').each(function () {
      var select = $(this);
      if (typeof show === 'undefined') {
        show = select.find('option[value="' + value + '"]').length == 0;
      }
      if (show) {
        select.showOption(value);
      }
      else {
        select.hideOption(value);
      }
    });
  };
  $.fn.showOption = function (value) {
    /// <summary>Show the desired option in the location it was in when hideOption was first used</summary>
    return this.filter('select').each(function () {
      var select = $(this);
      var found = select.find('option[value="' + value + '"]').length != 0;
      if (found) return; // already there

      var info = select.data('opt' + value);
      if (!info) return; // abort... hideOption has not been used yet

      var targetIndex = info.data('i');
      var options = select.find('option');
      var lastIndex = options.length - 1;
      if (lastIndex == -1) {
        select.prepend(info);
      }
      else {
        options.each(function (i, e) {
          var opt = $(e);
          if (opt.data('i') > targetIndex) {
            opt.before(info);
            return false;
          }
          else if (i == lastIndex) {
            opt.after(info);
            return false;
          }
        });
      }
      return;
    });
  };
  $.fn.hideOption = function (value) {
    /// <summary>Hide the desired option, but remember where it was to be able to put it back where it was</summary>
    return this.filter('select').each(function () {
      var select = $(this);
      var opt = select.find('option[value="' + value + '"]').eq(0);
      if (!opt.length) return;

      if (!select.data('optionsModified')) {
        // remember the order
        select.find('option').each(function (i, e) {
          $(e).data('i', i);
        });
        select.data('optionsModified',...