在选择下拉列表中添加更多选项，同时使用jQuery打开它

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.

如果有人能说出解决方案,我将不胜感激

1 个解决方案

#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.

我相信它不能用普通的选择元素来完成。但是你可以伪装一些元素,比如select和bind event on s来改变真正的select元素的值。

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.

在下面的示例中,我使用boostrap的下拉菜单(但您几乎可以使用其他任何内容)将菜单中的单击项同步到select元素中的活动值。可以隐藏选择元素。我让它可见,让你看到它在片段中有效。

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.

然后你可以使用$(“form”)。serialize()或$(“select [name ='selected-lang']”)。val()来轻松获取select的值并忽略花哨的bootstrap菜单。

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>

#1