1, css部分
<style>
.DivClose
{
display:none;
position:absolute;
250px;
height:220px;
border-style:solid;
border-color:Gray;
border-1px;
background-color:#99A479;
}
.LabelClose
{
vertical-align:text-top;
position:absolute;
bottom:0px;
font-family:Verdana;
}
.DivCheckBoxList
{
display:none;
background-color:White;
250px;
position:absolute;
height:200px;
overflow-y:auto;
overflow-x:hidden;
border-style:solid;
border-color:Gray;
border-1px;
}
.CheckBoxList
{
position:relative;
250px;
height:10px;
overflow:scroll;
font-size:small;
}
</style>
2,js
<script type="text/javascript">
var timoutID;
//This function shows the checkboxlist
function ShowMList() {
var divRef = document.getElementById("divCheckBoxList");
divRef.style.display = "block";
// var divRefC = document.getElementById("divCheckBoxListClose");
// divRefC.style.display = "block";
}
//This function hides the checkboxlist
function HideMList() {
document.getElementById("divCheckBoxList").style.display = "none";
//document.getElementById("divCheckBoxListClose").style.display = "none";
}
//This function finds the checkboxes selected in the list and using them,
//it shows the selected items text in the textbox (comma separated)
function FindSelectedItems(sender, textBoxID) {
var cblstTable = document.getElementById(sender.id);
var checkBoxPrefix = sender.id + "_";
var noOfOptions = cblstTable.rows.length;
var selectedText = "";
for (i = 0; i < noOfOptions; ++i) {
if (document.getElementById(checkBoxPrefix + i).checked) {
if (selectedText == "")
selectedText = document.getElementById
(checkBoxPrefix + i).parentNode.innerText;
else
selectedText = selectedText + "," +
document.getElementById(checkBoxPrefix + i).parentNode.innerText;
}
}
document.getElementById(textBoxID.id).value = selectedText;
}
// Append an event to the checkboxes in the list
</script>
3,html
<div id="divCustomCheckBoxList" runat="server" onmouseover="clearTimeout(timoutID);"
onmouseout="timoutID = setTimeout('HideMList()', 750);">
<table>
<tr>
<td align="right" class="DropDownLook">
<input id="txtSelectedMLValues" type="text" readonly="readonly"
onclick="ShowMList()" style="229px;" runat="server" />
</td>
<td align="left" class="DropDownLook">
<img id="imgShowHide" runat="server" src="drop.gif"
onclick="ShowMList()" align="left" />
</td>
</tr>
<tr>
<td colspan="2" class="DropDownLook">
<div>
<%-- <div runat="server" id="divCheckBoxListClose" class="DivClose">
<label runat="server" onclick="HideMList();"
class="LabelClose" id="lblClose"> x</label>
</div>--%>
<div runat="server" id="divCheckBoxList" class="DivCheckBoxList">
<asp:CheckBoxList ID="lstMultipleValues" runat="server" AutoPostBack="true"
Width="250px" CssClass="CheckBoxList"
onselectedindexchanged="lstMultipleValues_SelectedIndexChanged">
<asp:ListItem Value="0">ww</asp:ListItem>
<asp:ListItem Value="2">qq</asp:ListItem>
<asp:ListItem Value="3">bv</asp:ListItem>
<asp:ListItem Value="4">nn</asp:ListItem></asp:CheckBoxList>
</div>
</div>
</td>
</tr>
</table>
</div>