JSFiddle - React, Tailwind, and code Playground

HTML

<select name="city">
  <option class="default" value="">Please select</option>  
  <option class="default">A</option>
  <option class="default">B</option>
  <option class="default">C</option>
  
  <option>D</option>
  <option>E</option>
  <option>F</option>
  <option>G</option>
  <option>H</option>
  <option>I</option>
</select>

JavaScript

jQuery(function ($) {
  var select   = $("select[name=city]"),
      defaults = select.children(".default"),
      others   = select.children(":not(.default)").remove(),
      more     = $('<option value="more">Show more</option>');

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