Question

I need a select-box with multiple columns when expanded – I know that this is not possible using a regular select input tag, so I am searching for a jQuery way of doing it.

I have already found a few examples on the Internet but they are all of rather low quality/functionality, e.g. they are not corssbrowser or it does not close unless selecting an option but it should behave like a regular selectbox so it is closing when clicking outside the box etc.

I hope some of you can suggest good exaples?

Answer 1

i developed a demo for you. i think you can use it as a reference,
u can add more css effect to it.

html part:

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

css part:

.erim{
    color:red
}

jquery part:

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

    })
})