How to display number only not all the selected in chosen

Question

I am using chosen plugin for dropdown, its works very good , only one issue I am facing is it increase height with multiple selection

This is the plugin https://harvesthq.github.io/chosen/

<select data-placeholder="Choose a country..." multiple class="chosen-select">
$(".chosen-select").chosen();

when we select multiple options it display like this display like this

But I want this too be like this showng number of selected option

Thank you

Answer 1

there is no default methods available for chosen js. I have tried something you can look once.

$(document).ready(function(){
    $(".chosen-select").chosen();
    _setFilter();
    $('.chosen-select').on('chosen:showing_dropdown', function(evt, params) {
        _resetFilter()
    });
    $('.chosen-select').on('chosen:hiding_dropdown', function(evt, params) {
        _setFilter();
    });
});
function _resetFilter() {
    $('.count_option').hide();
    $('.search-field').show();
    $('.search-choice').show();
    _updateCount();
}
function _setFilter() {
    if($('.count_option').length < 1) {
        $('.chosen-choices').append('<li class="count_option">States<span>0</span></li>');
    }
    $('.count_option').show();
    $('.search-field').hide();
    $('.search-choice').hide();
    _updateCount();
}
function _updateCount()
{
    var count = $(".chosen-select :selected").length;
    $('.count_option span').html('('+count+')');
}

.chosen-choices, .count_option{
        width: 300px !important;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" />
<select data-placeholder="Choose a country..." multiple class="chosen-select">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>