实现 DropDownList的CheckBox多选

本文主要是介绍实现 DropDownList的CheckBox多选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.css文件
.DivClose
{
display: none;
position: absolute;
width: 250px;
height: 220px;
border-style: solid;
border-color: Gray;
border-width: 1px;
background-color: #99A479;
}

.LabelClose
{
vertical-align: text-top;
position: absolute;
bottom: 0px;
font-family: Verdana;
}

.DivCheckBoxList
{
display: none;
background-color:Red;
width: 250px;
position: absolute;
height: 200px;
overflow-y: auto;
overflow-x: hidden;
border-style: solid;
border-color: Gray;
border-width: 1px;
}

.CheckBoxList
{
position: relative;
width: 250px;
height: 10px;
overflow: scroll;
font-size: small;

}

2.js文件

var timoutID;

//This function shows the checkboxlist
function ShowMList() {
var divRef = document.getElementById("divCheckBoxList");
var divClose = document.getElementById("divCheckBoxListClose");
if (divRef.style.display == "none") {
divRef.style.display = "block";
}
else {
divRef.style.display = "none";
}
if (divClose.style.display == "none") {
divClose.style.display = "block";
}
else {
divClose.style.display = "none";
}
}

//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 = "";
var hdnItemKey="";
for (i = 0; i < noOfOptions; ++i) {
if (document.getElementById(checkBoxPrefix + i).checked) {
hdnItemKey =hdnItemKey + document.getElementById
(checkBoxPrefix + i).value + "," ;
if (selectedText == "")
selectedText = document.getElementById
(checkBoxPrefix + i).parentNode.innerText;
else
selectedText = selectedText + "," +
document.getElementById(checkBoxPrefix + i).parentNode.innerText;
}
}
document.getElementById(textBoxID.id).value = selectedText;
$("#hdnItemKey").val(hdnItemKey);
}