javascript - 选择 2 下拉菜单以在第三个选定项目上显示 "x selected"

Question

以下代码使用 select2 允许从下拉列表中进行多项选择。我的问题是如何在第三次选择后显示“x selected”，而不是所有的选择并有一个巨大的文本框？

<select multiple id="e1" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

$("#e1").select2();

我这里有一个 jSfiddle

http://jsfiddle.net/ishanbakshi/fyhsz9ra/

Answer 1

我努力工作并设法为您提供了一个 jQuery 解决方案。将您的 JavaScript 更改为:

$("#e1").select2();

$(document).ready(function(){
var showHugeSelect = false;

$("#s2id_e1 ul.select2-choices").prepend("<button id='btnE1ShowAll' style='display: none;' />")

$("#btnE1ShowAll").click(function(e){
$("#s2id_e1 .select2-search-choice").show();
$("#btnE1ShowAll").hide();
showHugeSelect = true;

function hideHugeSelect(){
showHugeSelect = false;
}

setTimeout(hideHugeSelect, 5000);
})

setInterval(customizeSelectE1, 500);

function customizeSelectE1(){
var selectedCount = $("#s2id_e1 .select2-search-choice").length;

if(selectedCount > 2 && !showHugeSelect){
$("#s2id_e1 .select2-search-choice").hide();
$("#btnE1ShowAll").html(selectedCount + " selected").show();
}
}


})

我已经在 jsFiddle 中检查过了，它运行良好。不可能做出更优雅的解决方案。如果你真的想要一个更优雅的，你需要自己开发控件或更改Select2的源代码。