hide/show options in selectbox
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.