如何通过 JavaScript 打开选择？

How to open Chosen via JavaScript?

提问by Tzvi

I need to open the Chosen dropdownvia JavaScript so users do not have to click on the select to show it, how can this be done?

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

采纳答案by Tzvi

This solves the problem,

这解决了问题，

just make sure chzn-select is the ID of your select.

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

chzn-drop will stay opened after users click on an option:

用户单击选项后，chzn-drop 将保持打开状态：

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

回答by techfoobar

You can open a chosenselect box via JS by doing:

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

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

where <id-of-your-select>is the id of your <select>element.

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

For ex: if your <select>element is like <select id="foo" ...>, then the code above will become:

例如：如果你的<select>元素是 like <select id="foo" ...>，那么上面的代码将变成：

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

回答by luhuiya

It is very weird but i find answer is using timeout

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

it somehow neet to timeout first maybe because my element is cloned hope useful for others

它以某种方式需要先超时，可能是因为我的元素被克隆，希望对其他人有用

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

回答by Narendra Payyala

you can add the below two lines to your code it will keep your chosen always open. It worked for me.

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

list_startis your select element id.

list_start是您选择的元素 ID。

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

回答by KAR

In the updated Chosen jquery pluginfollowing works fine with stopPropagation.

在更新的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>

回答by Ben

@tzvi's answer is valuable in the in the event that you're trying to trigger chosen so that it stays open after a selection is made (IE: making multiple selections in one go). Allow me to extend this a bit (updated for chosen 1.0, by the way):

@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();
});

Essentially it forces the chosen dropdown to stay open by overriding some css that is usually in place by the "active" class. Then we have a couple of click events that will undo this if you click anywhere outside off the dropdown. Worked perfectly for me.

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

Edit: By the way, if you really want to trigger the drop down via JS, use Chosen 1.0's API:

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

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

In context of the original question, this will allow you to open the box or reopen the box after a selection is made. It will not, however, keep the box open after a selection is made (without closing for a moment).

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