先上图：
<script type="text/javascript">
$(document).ready(function () {
$("select").MultDropList({selected:"0,1" });
});
</script>Demo页代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下拉多选</title>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="js/jqmuselect.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("select").MultDropList({selected:"0,1" });
});
</script>
<style type="text/css">
body{
font-size:10pt;}
.wraper
{
display:inline-block;
}
.list
{
overflow: auto;
position: absolute;
border: 1px solid #617775;
display: none;
background: none repeat scroll 0 0 #F0F6E4;
float: left;
z-index: 1000000;
}
.list ul li
{
width:85%;
padding-top: 1px;
padding-bottom: 1px;
cursor:pointer;
line-height: 22px;
}
ul{padding-left :0px;list-style:none outside none;}
</style>
</head>
<body>
<select name="Gender" id="Gender" style="width:180px;" multiple="true" size="6" class="dropdownlist mul_multiple_select ">
<option value="0" title="男">男</option>
<option value="1" title="女">女</option>
<option value="2" title="保密">保密</option>
</select>
<select name="Gender2" id="Select1" style="width:180px;" multiple="true" size="6" class="dropdownlist mul_multiple_select ">
<option value="0" title="男1">男1</option>
<option value="1" title="女1">女1</option>
<option value="2" title="保密1">保密1</option>
</select>
</body>
</html>插件jqmuselect.js代码：
// JavaScript Document
(function ($) {
$.fn.extend({
MultDropList: function (options) {
var op = $.extend({ wraperClass: "wraper", width: "150px", height: "200px", data: "", selected: "" }, options);
return this.each(function () {
var $this = $(this); //select
var width = $this.width();
if (width < 100)
width = 100;
var $thisold = $(this); //select
$this.hide(); //隐藏原select
var selData = $(this).children('option'); //获取所有select的数值
var muid = $this.attr('id') + "_muselect";
$this.after("<input readonly type='text' id='" + muid + "' />");
$this = $("#" + muid);
$this.css('width', width);
var conSelector = "#" + $this.attr("id");
var $wraper = $(conSelector).wrapAll("<div><div></div></div>").parent().parent().addClass(op.wraperClass);
var $list = $('<div class="list"></div>').appendTo($wraper);
$list.css({ "width": width });
//控制弹出页面的显示与隐藏
$this.click(function (e) {
//$(".list").hide();
$list.toggle();
e.stopPropagation();
});
$this.css('cursor', 'pointer');
$(document).click(function () {
$list.hide();
});
$list.filter("*").click(function (e) {
e.stopPropagation();
});
//加载默认数据
$list.append('<ul><li><input type="checkbox" class="selectAll" value="" /><span> 全部</span></li></ul>');
var $ul = $list.find("ul");
selData.each(function () {
$ul.append('<li><input type="checkbox" value="' + $(this).attr('value') + '" /><span> ' + $(this).text() + '</span></li>');
});
//加载勾选项
var seledArr;
if (op.selected.length > 0) {
seledArr = op.selected.split("&");
$.each(seledArr, function (index) {
$thisold.children("option[value='" + seledArr[index] + "']").attr('selected', true);
$("li input[value='" + seledArr[index] + "']", $ul).attr("checked", "checked");
var vArr = new Array();
$("input[class!='selectAll']:checked", $ul).each(function (index) {
vArr[index] = $(this).next().text();
});
$this.val(vArr.join(","));
});
}
//全部选择或全不选
$("li:first input", $ul).click(function () {
if ($(this).attr("checked")) {
$("li input", $ul).attr("checked", "checked");
}
else {
$("li input", $ul).removeAttr("checked");
}
});
//点击其它复选框时，更新隐藏控件值,文本框的值
$("input", $ul).click(function (event) {
window.event.cancelBubble = true
var kArr = new Array();
var vArr = new Array();
$("input[class!='selectAll']:checked", $ul).each(function (index) {
kArr[index] = $(this).val();
vArr[index] = $(this).next().text();
});
$thisold.children("option").removeAttr('selected');
for (i = 0; i < kArr.length; i++) {
$thisold.children("option[value='" + kArr[i] + "']").attr('selected', true);
}
$this.val(vArr.join(","));
});
//点击li的时候选择
$("li", $ul).click(function () {
$(this).children().get(0).click();
return;
});
});
}
});
})(jQuery);
