How to open Chosen via JavaScript?

user_775026 0
Viewed 13951

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?

jquery-chosen user-interface html jquery javascript
6 Answers

@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):

$('#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.

Edit: By the way, if you really want to trigger the drop down via JS, use Chosen 1.0's 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).

user_19148820
Related