如何只显示数字而不显示所有选中的

Question

我使用selected插件进行下拉，它的效果非常好，我面临的唯一问题是它通过多选增加高度

这是插件https://harvesthq.github.io/chosen/

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

当我们选择多个选项时，它显示如下像这样显示

但我希望这也像这个显示选择的数量

谢谢

Answer 1

所选js没有可用的默认方法。我试过一些你可以看一次的东西。

$(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>