扩展时我需要一个包含多列的选择框 - 我知道使用常规选择输入标记是不可能的,所以我正在寻找一种jQuery方法。
我已经在互联网上找到了一些例子,但它们的质量/功能都相当低,例如:它们不是corssbrowser,或者它不会关闭,除非选择一个选项,但它应该像常规选择框一样,所以它在关闭框外等时关闭。
我希望你们中的一些人可以提出好的建议吗?
答案 0 :(得分:1)
我为你开发了一个演示。我想你可以用它作为参考, 你可以添加更多的CSS效果。
html部分:
<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();
})
})