выбор нескольких столбцов jQuery

Question

Мне нужно поле выбора с несколькими столбцами при расширении - я знаю, что это невозможно при использовании обычного входного тега select, поэтому я ищу способ сделать это в jQuery.

У меня уже естьнашел несколько примеров в Интернете, но все они довольно низкого качества / функциональности, например, они не являются corssbrowser или не закрываются, если не выбрана опция, но должны вести себя как обычная коробка выбора, поэтому она закрывается при щелчке за пределами поля и т..

Надеюсь, некоторые из вас могут предложить хорошие примеры?

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();

    })
})