Question

我有一个包含几位数的下拉列表，但我还希望为其添加显示更多功能。

目前该功能正常运行，但当我点击Show more选项时，下拉菜单会关闭，然后我需要再次打开下拉列表以查看已添加的新选项。

我希望在不关闭下拉列表的情况下显示新增的选项，因此用户无需一次又一次打开下拉列表。

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>

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

Answer 1

我相信使用普通选择元素无法做到这一点。但是您可以伪装某些元素，例如select并绑定事件，以更改真正的select元素的值。

在下面的示例中，我使用boostrap的下拉菜单（但您几乎可以使用其他任何东西）将菜单中的单击项同步到select元素中的活动值。选择元素可以隐藏。我将其保留为可见状态，以供您查看。

然后，您可以使用$("form").serialize()或$("select[name='selected-lang']").val()轻松获得select的值，而忽略高级引导菜单。

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>

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

1 个答案: