看到很多都需要一个下拉的select ,集成多选的功能，就自己写了一个简陋的demo，in peace .有时间修改会再发新的版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.8.2.js" type="text/javascript"></script> <link href="style/select.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function () { $(".select_top_02").click(function () { var mark = $(this).attr("mark"); if (mark == "off") { $(".select_down").show(); $(this).attr("mark", "on"); $(this).addClass("select_top_02_on"); } else if (mark == "on") { $(".select_down").hide(); $(this).attr("mark", "off"); $(this).removeClass("select_top_02_on"); } }); $("#tj").click(function () { var newArray = new Array(); $("input[name=dd]").each(function () { if ($(this).prop("checked") == true) { var text = $(this).val(); newArray.push(text); } }); var newText = newArray.join(','); $("#select_input").val(newText); $(".select_down").hide(); $(".select_top_02").removeClass("select_top_02_on"); }); }); </script> <style type="text/css"> </style> </head> <body> <div class="select_div"> <div class="select_top"> <div class="select_top_01"> <input type="text" id="select_input"/> </div> <div class="select_top_02" mark="off"> </div> </div> <div class="select_down"> <div class="select_checkbox"><input type="checkbox" name="dd" value="1"/>1</div> <div class="select_checkbox"><input type="checkbox" name="dd" value="2"/>2</div> <div class="select_checkbox"><input type="checkbox" name="dd" value="3"/>3</div> <div class="select_checkbox"><input type="checkbox" name="dd" value="4"/>4</div> <div class="select_checkbox"><input type="checkbox" name="dd" value="5"/>5</div> <div class="select_checkbox"><input type="button" id="tj" value="确定"/></div> </div> </div> </body> </html>
css页面：
.select_div { width:200px; height:30px; position:relative; border:1px solid #f58805; } .select_top { width:198px; height:30px; } #select_input { width:198px; height:28px; border:0px; } .select_down { width:200px; height:auto; position:absolute; top:30px; left:0px; display:none; } .select_checkbox { width:200px; height:30px; line-height:30px; } .select_top_01 { width:178px; height:28px; float:left; } .select_top_02 { width:20px; height:28px; float:left; cursor:pointer; background:url(../images/arrow.png) center center no-repeat; } .select_top_02_on { background:url(../images/arrow_on.png) center center no-repeat; }