I am using Chosen to give my <select> a proper look and a search input.

The problem is that with a <select multiple> when the user open the dropdown menu to choose the options he wants I want to keep the dropdown open between the clicks. It is really annoying to have the re-open the menu between each option selection.

I searched through the Chosen documentation and through the internet but I couldn't find to do it with Chosen.

Here is how I wrote my <select> and how applied Chosen to it (nothing special) :

<select multiple="multiple" id="foo" class="chosenSelect">
    <option value="NULL" disabled>Chose multiple somthing</option>';
    <option value="bar1">foobar1</option>';
    <option value="bar2">foobar2</option>';
    <option value="bar3">foobar3</option>';
</select>

and

$('.chosenSelect').chosen();

Any help is weled.

I am using Chosen to give my <select> a proper look and a search input.

The problem is that with a <select multiple> when the user open the dropdown menu to choose the options he wants I want to keep the dropdown open between the clicks. It is really annoying to have the re-open the menu between each option selection.

I searched through the Chosen documentation and through the internet but I couldn't find to do it with Chosen.

Here is how I wrote my <select> and how applied Chosen to it (nothing special) :

<select multiple="multiple" id="foo" class="chosenSelect">
    <option value="NULL" disabled>Chose multiple somthing</option>';
    <option value="bar1">foobar1</option>';
    <option value="bar2">foobar2</option>';
    <option value="bar3">foobar3</option>';
</select>

and

$('.chosenSelect').chosen();

Any help is weled.

• javascript
• jquery
• drop-down-menu
• jquery-chosen

Share Improve this question Follow asked May 21, 2017 at 18:20 Alexandre RivaraAlexandre Rivara 9322 silver badges1212 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Set hide_results_on_select to false.

I am not familiar with the Chosen library; so if there exists a better solution in the library itself, I'd defer to that solution.

However, if you do not find a better solution, and you still need the functionality, you can use this little hack.

$('.chosen-results').bind('click', function(e) {
  setTimeout(function() {
    $(e.currentTarget).parent().siblings('.chosen-choices').click()
  });
});

I reiterate, this is a hack and you should only use this if you've found nothing else. I'll edit the answer if I find something better.

Add a click trigger to the change event

$("select").chosen().change(function() {
 $(".search-field").trigger("click")
})

I agree with the solution @squgeim posted. However, after I selected something, the search criteria don't get kept. If I have a super long dropdown list, the scroll bar will bounce to the top. In order to keep my previous search criteria, I made some update on @squgeim's answer:

//restore previous search value
var chosenSearchValue = "";
$(".chosen-container-multi .search-field input").keyup(function(){
    chosenSearchValue = $(this).val();
})

//make chosen multiple select dropdown menu stay open after click
$('.chosen-results').bind('click', function(e) {
    if (chosenSearchValue){
        $(this).parents(".chosen-container-multi").find(".search-field input").val(chosenSearchValue);
    }
    setTimeout(function() {
        $(e.currentTarget).parent().siblings('.chosen-choices').click();
    });
});

Just use set hide_results_on_select to false if you want to keep showing the dropdown after chosing in option