jQuery 多列选择

Question

我需要一个展开时具有多列的选择框 - 我知道使用常规选择输入标签不可能做到这一点，所以我正在寻找一种 jQuery 方法来实现它。

我已经在互联网上找到了一些示例，但它们的质量/功能都相当低，例如，它们不是跨浏览器，或者除非选择一个选项，否则它不会关闭，但它的行为应该像常规选择框，因此在单击外部时它会关闭 ？

我希望你们中的一些人可以推荐一些好的例子

Answer 1

我为你开发了一个演示。我觉得你可以作为参考
你可以给它添加更多的CSS效果。

html 部分：

<div id="dropdown">open</div>
<div id="bodyof"></div>

css 部分：

.erim{
    color:red
}

jquery 部分：

//input data
var inp = [{title:"book"},{title:"cd"},{title:"dvd"}];
var selected = [];

$("#dropdown").click(function(){
    var ddd = $("#bodyof");
    $.each(inp, function(key, value){

        var a = $("<div id="+value.title+">" + value.title + "</div>");
        ddd.append(a);
        a.click(function(){
            $(this).toggleClass("erim");
        })

    })
        var buttn = $("<div > OK </div>");
            ddd.append(buttn);
    buttn.click(function(){

        alert("Save it OR ...");
        selected =[];
        $("div.erim").each(function(){
            selected.push(this.id);
        })
            alert(selected);
        ddd.empty();

    })
})