如何通过 JavaScript 打开 Chosen？

Question

我需要通过 JavaScript 打开Chosen dropdown，这样用户就不必点击选择来显示它，这怎么做？

Answer 1

你可以通过 JS 打开一个 chosen 选择框：

$('#<id-of-your-select>_chzn').trigger('mousedown');

其中<id-of-your-select> 是您的<select> 元素的ID。

例如：如果您的<select> 元素类似于<select id="foo" ...>，那么上面的代码将变为：

$('#foo_chzn').trigger('mousedown');

Answer 2

这很奇怪，但我发现答案是使用超时

它首先需要超时 可能是因为我的元素被克隆了 希望对其他人有用

setTimeout(function(){ firstElement.trigger("chosen:open"); }, 100);

Answer 3

您可以将以下两行添加到您的代码中，它将使您选择的始终保持打开状态。它对我有用。

list_start 是您的选择元素 ID。

("#list_start").trigger('chosen:open');
$('.chosen-drop').css('left', 0);

Answer 4

在更新后的Chosen jquery plugin 中，以下内容可与 stopPropagation 配合使用。

$("#selectbox").trigger("chosen:open");			
event.stopPropagation();

$(document).ready(function() {
  $("#selectbox").chosen({});
  $("button").click(function() {
    $("#selectbox").trigger("chosen:open");
    event.stopPropagation();
  });
});

#selectbox {
  width: 140px
}

<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>


<select id="selectbox">
  <option val="option1">Option 1</option>
  <option val="option2">Option 2</option>
  <option val="option3">Option 3</option>
  <option val="option4">Option 4</option>
  <option val="option5">Option 5</option>
  <option val="option6">Option 6</option>
</select>


<button>Trigger Chosen</button>

Answer 5

@tzvi 的答案在您尝试触发选择以便在选择后保持打开状态（即：一次进行多项选择）的情况下很有价值。请允许我稍微扩展一下（顺便说一下，已针对所选的 1.0 进行了更新）：

$('#selectbox').change(function() {
  $('#selectbox_chosen .chosen-drop').css('left', '0');
});

$('html').click(function() {
  $('#selectbox_chosen .chosen-drop').css('left', '');
});

$('#selectbox_chosen .chosen-drop').click(function(e) {
  e.stopPropagation();
});

本质上，它通过覆盖通常由“活动”类放置的一些 css 来强制选择的下拉菜单保持打开状态。然后我们有几个单击事件，如果您单击下拉菜单之外的任何位置，这些事件将撤消此操作。非常适合我。

编辑： 顺便说一句，如果你真的想通过 JS 触发下拉，请使用 Chosen 1.0 的 API：

$('#selectbox').trigger('chosen:open')

在原始问题的上下文中，这将允许您在选择后打开框或重新打开框。但是，它不会在做出选择后使框保持打开状态（不会关闭片刻）。

Answer 6

这样就解决了问题，

只需确保 chzn-select 是您选择的 ID。

chzn-drop 会在用户点击一个选项后保持打开状态：

        $('#chzn-select').change(function(event)
        {
            $('.chzn-drop').css('left', 0);
        });