hide/show options in selectbox I've got a code that is working in my environment.
Nevertheless it is pretty ugly.

This is what I am trying to do.
I get a selectbox from a side with a lot of city names.
I filter some names and push them into an array and hide them. The other ones are also pushed into an array, but shown.

Now I append two options to the end of the selectbox, one is displayed, the other one hidden.

When someone clicks the option all, the options from the array otherCities are shown and defaultCities are hidden. the option all is hidden as well, less is shown.

This behavior works the other way round, too.

How can I simplify my code? Any help is welcome.

var otherCities = new Array();
var defaultCities = new Array();
var selectBoxCity = jQuery("select[name='city']");  

if(selectBoxCity.size() != 0) {
        selectBoxCity.prepend('&lt;option value="" selected="selected"&gt;-- Please Select --&lt;/option&gt;');
    otherCities = new Array();
    defaultCities = new Array();
    var cityArray = ['OE', 'MK', 'SI', 'BO', 'DO', 'BM', 'HER', 'GE', 'HH'];
    var options = jQuery("select[name='city'] option");
    options.each(function() {
        var o = jQuery(this);
        if (jQuery.inArray(o.attr("value"), cityArray) == -1) { 
            otherCities.push(o.hide());
        } else {
            defaultCities.push(o.show());
        }
    });
    selectBoxCity.find("option").end().append("&lt;option value='all'&gt;+&lt;/option&gt;");
    selectBoxCity.find("option").end().append("&lt;option value='less'&gt;-&lt;/option&gt;");

}


var selectBoxCity = jQuery("select[name='city']");
selectBoxCity.find("option:first").attr("selected", true);

$("select[name='city'] option[value='less']").hide();

if(selectBoxCity.val() == "all") {
    jQuery.each(otherCities,function() {
        $(this).show();
    });
    jQuery.each(defaultCities,function() {
        $(this).hide();
    }); 
    $("select[name='city'] option[value='all']").hide();
    $("select[name='city'] option[value='less']").show();
}
if(selectBoxCity.val() == "less") {
    jQuery.each(otherCities,function() {
        $(this).hide();
    });
    jQuery.each(defaultCities,function() {
        $(this).show();
    }); 
    $("select[name='city'] option[value='all']").show();
    $("select[name='city'] option[value='less']").hide();
}
Here's something that seems to work OK (here's a demo)

jQuery(function ($) {
  var select   = $("select[name=city]"),
      defaults = select.children(".default"),
      others   = select.children(":not(.default)");

  others.remove();

  select.on("change", function (event) {
    var value = select.val();
    if(value === "more") {
      defaults.remove();
      select.append(others);
    } else if(value === "less") {
      others.remove();
      select.append(defaults);
    }
  });
});​


Everything else is stored in the markup, like so:

&lt;select name="city"&gt;
  &lt;!-- default options --&gt;
  &lt;option class="default"&gt;A&lt;/option&gt;
  &lt;option class="default"&gt;B&lt;/option&gt;
  &lt;option class="default"&gt;C&lt;/option&gt;
  &lt;option value="more" class="default"&gt;Show more&lt;/option&gt;

  &lt;!-- expanded options --&gt;
  &lt;option&gt;D&lt;/option&gt;
  &lt;option&gt;E&lt;/option&gt;
  &lt;option&gt;F&lt;/option&gt;
  &lt;option&gt;G&lt;/option&gt;
  &lt;option&gt;H&lt;/option&gt;
  &lt;option&gt;I&lt;/option&gt;
  &lt;option value="less"&gt;Show less&lt;/option&gt;
&lt;/select&gt;​


As I said in the comments, .hide and .show doesn't seem to have any effect on &lt;option&gt; elements. Neither does visibility: hidden. In either case, they all show up in the select dropdown. You can disable options, but then they're still there, just greyed out.
Hence, this code forcibly removes/appends the options.

Of course, it might make more sense to simply remove/append only the non-default options. To me it makes more sense that the default options are a subset of all the options, not an entirely different set of options.

Furthermore, it might be good to let the more/less options be added by JS, so clients that don't support JS don't see them.

Putting all that together, you get this.
Without JS, you'll just see a full list. With JS, you get the more/less options and all that jazz.