<html xmlns="http:///1999/xhtml">
<head runat="server">
<title>下拉框实现多选</title>
<script src="Jquery-1.8." type="text/javascript"></script>
<script type="text/javascript">
/*
说明：由于CheckBoxList 值是在后台绑定的，前台没有设置value，所有当用js取checkbox的value值时，默认都为on。
在后台可以正常访问，解决方案：暂无。
*/
$(function() {
$("#txtList").mouseenter(function() {
$("#divChkList").slideDown("fast");
});
$("#divMulti").mouseleave(function() {
$("#divChkList").slideUp("fast");
});
$("#divChkList :checkbox").each(function() {
$(this).click(function() {
var $txtList = $("#txtList");
if (this.checked) {
$txtList.val($txtList.val() + $(this).next().text()+",");
}
else {
$txtList.val($txtList[0].value.replace($(this).next().text()+',',''));
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="checkbox" id="test" value="1" title="d" />
<div style="width:400px;height:300px;margin:0 auto;">
<div id="divMulti">
<asp:TextBox ID="txtList" runat="server" Width="100px"></asp:TextBox>
<div id="divChkList" style="display: none; border: solid 1px #CCCCCC; position: fixed;
z-index: 100; height: 160px; width: 100px; overflow-y: scroll; background-color: White">
<asp:CheckBoxList ID="chkList" runat="server" RepeatLayout="Table" RepeatDirection="Vertical">
</asp:CheckBoxList>
</div>
</div>
</div>
</form>
</body>
</html>