How to open Chosen via JavaScript?

Question

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

Solution 1

This solves the problem,

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

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

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

Solution 2

You can open a chosen select box via JS by doing:

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

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

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

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

Solution 3

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);

Solution 4

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

list_start is your select element id.

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

Solution 5

In the updated Chosen jquery plugin following works fine with 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>

View more solutions

Comments

[Tzvi]

Hi thanks, this doesnt work for me for: <select name="chzn-select[]" id="chzn-select" data-placeholder="<?php echo _("click.to.select.tags")?>" style="width:350px; direction: rtl" multiple class="chzn-select-create-option chzn-rtl" tabindex="8"> The JS code is: <input type="button" onclick="console.log($('#chzn-select_chzn').trigger('mousedo‌​wn'));" value="ClicktoOpen">

[biphobe]

This is wrong since it doesn't add "active" classes' set to Chosen's markup. Techfoobar gave you a nice hint - "click" event would be more suitable to use in this situation though.

[biphobe]

It works, I just checked it. Remember that you must trigger a click event on an anchor that resides in main container (.chzn-container > .chzn-single).

[anataliocs]

Thank you so much, I've been trying to figure this out forever.

[Valamas]

You are rocks awesome!

[chiliNUT]

$("#<id-of-your-select>+div') should work accross versions since they do seem to change the id suffix