jquery 已选择多个：如何在选择之间保持菜单打开

Question

我正在使用 Chosen 为我的 <select> 提供正确的外观和搜索输入。

问题是 <select multiple> 当用户打开下拉菜单选择他想要的选项时，我想在点击之间保持下拉菜单打开。在每次选择选项之间重新打开菜单真的很烦人。

我在 Chosen documentation 和互联网上进行了搜索，但找不到使用 Chosen 进行的操作。

这是我如何编写 <select> 以及如何将 Chosen 应用于它（没什么特别的）：

<select multiple="multiple" id="foo" class="chosenSelect">
    <option value="NULL" disabled>Chose multiple somthing</option>';
    <option value="bar1">foobar1</option>';
    <option value="bar2">foobar2</option>';
    <option value="bar3">foobar3</option>';
</select>

和

$('.chosenSelect').chosen();

欢迎任何帮助。

Answer 1

我不熟悉 Chosen 库；因此，如果库本身存在更好的解决方案，我会遵从该解决方案。

但是，如果您没有找到更好的解决方案，并且您仍然需要该功能，则可以使用这个 hack.

$('.chosen-results').bind('click', function(e) {
  setTimeout(function() {
    $(e.currentTarget).parent().siblings('.chosen-choices').click()
  });
});

我重申，这是一个 hack，你应该只在你没有发现任何其他东西的情况下使用它。如果我找到更好的答案，我会编辑答案。

Answer 2

为更改事件添加点击触发器

$("select").chosen().change(function() {
 $(".search-field").trigger("click")
})

Answer 3

我同意@squgeim 发布的解决方案。然而，在我选择了一些东西之后，搜索条件并没有得到保留。如果我有一个超长的下拉列表，滚动条会弹到顶部。为了保留我之前的搜索条件，我对@squgeim 的回答做了一些更新：

//restore previous search value
var chosenSearchValue = "";
$(".chosen-container-multi .search-field input").keyup(function(){
    chosenSearchValue = $(this).val();
})

//make chosen multiple select dropdown menu stay open after click
$('.chosen-results').bind('click', function(e) {
    if (chosenSearchValue){
        $(this).parents(".chosen-container-multi").find(".search-field input").val(chosenSearchValue);
    }
    setTimeout(function() {
        $(e.currentTarget).parent().siblings('.chosen-choices').click();
    });
});

Answer 4

将 hide_results_on_select 设置为 false。

jquery 已选择多个：如何在选择之间保持菜单打开

jquery chosen multiple : how to keep menu open between selection

javascript

jquery

jquery-chosen

drop-down-menu