Add more options into select dropdown, while it's opened with jQuery

Question

I have a dropdown that contains a few digits, but I also wish to add a show more functionality to it.

Currently the feature is working, but when I click on the Show more option, the dropdown closes and then I need to open the dropdown again to see the new options, that were added.

I want to show the new, added options without closing the dropdown, so the user doesn't have to open the dropdown again-and-again.

jQuery(function ($) {
  var select   = $("select[name=city]"),
      defaults = select.children(".default"),
      others   = select.children(":not(.default)").remove(),
      more     = $('<option value="more">Show more</option>');
  
  others = others.remove().add('<option value="less">Show less</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("");
    }
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<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>

Would appreciate if anyone could tell a solution.

Answer 1

I believe that it cannot be done with plain select element. But you can masquerade some element like select and bind event/s on that to alter the value of a genuine select element.

In an example below, I use boostrap's dropdown menu (but you can use almost anything else) to sync clicked item from menu to active value in select element. The select element can be hidden. I left it visible for you to see it works in the snippet.

You can then use $("form").serialize() or $("select[name='selected-lang']").val() to easily get the value of the select and ignore the fancy bootstrap menu.

var ddlWrappingElem = $(".dropdown");
var ddlHeaderElem = ddlWrappingElem.find("button.dropdown-toggle");

ddlWrappingElem.find("li.load-more").on("click", function (e) {
    var toggleElem = $(e.target);
    toggleElem.hide();
    ddlWrappingElem.find("li.hidden-by-default").show();
    setTimeout(function () {
        ddlHeaderElem.click();
    }, 0);
});

var selectElem = $("select[name='selected-lang']");

ddlWrappingElem.find("li").not(".load-more").on("click", function (e) {
    var pickedItemElem = $(e.target);
    var langLabel = pickedItemElem.text();
    selectElem.find("option").each(function (i, option) {
        var optionElem = $(option);
        optionElem.prop("selected", optionElem.text() === langLabel);
    });
});

.hidden-by-default { display: none }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Pick language <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
        <li class="load-more"><a href="#">load more</a></li>
        <li class="hidden-by-default"><a href="#">C#</a></li>
        <li class="hidden-by-default"><a href="#">Java</a></li>
        <li class="hidden-by-default"><a href="#">C++</a></li>
    </ul>
    <br /><br />
    <select name="selected-lang">
        <option>- none -</option>
        <option value="1">HTML</option>
        <option value="2">CSS</option>
        <option value="3">JavaScript</option>
        <option value="4">C#</option>
        <option value="5">Java</option>
        <option value="6">C++</option>
    </select>
</div>