javascript - 如何通过 JavaScript 打开 Chosen？

Question

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

Answer 1

您可以通过执行以下操作通过 JS打开选定的选择框：

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

你的元素<id-of-your-select>的id在哪里。<select>

例如：如果您的<select>元素是 like <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 插件中，以下与 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);
        });