[转]多选下拉菜单的一个实现方案 by unifly

 多选下拉菜单的一个实现方案 by unifly

    多选下拉菜单的好处自不必说，我的项目里正好要用到，估计网上实现的肯定不少，Google之，结果竟然没有我想要的，关键词：“多选 下拉”，看了几个老外的网站，倒是不少，可就是得purchase很不爽，既然如此，自己动手，丰衣足食，同时交给“网络爬虫”奉献给广大需要此东东的懒民好了，呵呵……

    先看下效果：  选择人员

代码如下：

 <script language="javascript">
//-----------------------人员多选下拉菜单-----------------------------
/*隐藏人员多选下拉列表div*/
function hideMultiDropDownDiv(){ 
    document.getElementById("multiDropDownDiv").style.display = "none"; 
}
/*显示人员多选下拉列表div*/
function showMultiDropDownDiv(inputid){
    //注意，具体位置自行调整
    document.getElementById("multiDropDownDiv").style.pixelLeft = document.getElementById(inputid).offsetLeft + document.getElementById(inputid).parentElement.offsetLeft-5 ;
    document.getElementById("multiDropDownDiv").style.pixelTop = document.getElementById(inputid).offsetTop + document.getElementById(inputid).parentElement.offsetTop+document.getElementById(inputid).offsetHeight-300;
    var is = document.getElementById("multiDropDownTableDiv").getElementsByTagName("input");
    for (var i=0;i<is.length;i++){
 is[i].checked = false;
}
   document.getElementById("multiDropDownTableDivCmd").innerHTML = "<a href=\"javascript:hideMultiDropDownDiv()\">关闭</a>&nbsp;<a href=\"javascript:fetchValOfMdd('"+inputid+"')\">确定</a>";
   document.getElementById("multiDropDownDiv").style.display = "block";
}
/*获取人员多选值*/
function fetchValOfMdd(inputid){
   var emplNames = "";
   var emplIds = "";
   var is = document.getElementById("multiDropDownTableDiv").getElementsByTagName("input");
   for (var i=0;i<is.length;i++){
       if(is[i].checked == true){
           if(emplNames == "")
               emplNames = emplNames+is[i].name;
           else
               emplNames = emplNames+","+is[i].name;
           if(emplIds == "")
               emplIds = emplIds+is[i].value;
           else
               emplIds = emplIds+","+is[i].value;
       }
   }
   document.getElementById(inputid).innerText = emplNames;
   hideMultiDropDownDiv();
}
</script>
<p><font face="Verdana" size="2">&nbsp;&nbsp;&nbsp; 先看下效果：<input id="mddSelectedValue" style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid" />&nbsp; <a href="javascript:showMultiDropDownDiv('mddSelectedValue')">选择人员</a></font></p>
<p><font face="Verdana" size="2">代码如下：</font></p>
<p>&nbsp;</p>
<!--人员多选下拉菜单div -->
<div id="multiDropDownDiv" style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; DISPLAY: none; Z-INDEX: 99; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; BACKGROUND-COLOR: #eef1f8; layer-background-color: #FFFFCC">
<div id="multiDropDownTableDiv" style="PADDING-LEFT: 14px; OVERFLOW: auto; WIDTH: 138px; PADDING-TOP: 10px; HEIGHT: 100px">
<table style="BORDER-RIGHT: gray 0px solid; BORDER-TOP: gray 0px solid; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid" cellspacing="0" cellpadding="0" barder="0">
    <tbody>
        <tr>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 13pt; BORDER-LEFT: 0px solid; WIDTH: 24px; BORDER-BOTTOM: 0px solid; FONT-FAMILY: Webdings" align="center">a</td>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; WIDTH: 80px; BORDER-BOTTOM: 0px solid" align="center">姓名</td>
        </tr>
        <tr>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" align="center"><input type="checkbox" name="张龙" value="11" /></td>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid">&nbsp;张龙</td>
        </tr>
        <tr>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" align="center"><input type="checkbox" name="赵虎" value="12" /></td>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid">&nbsp;赵虎</td>
        </tr>
        <tr>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" align="center"><input type="checkbox" name="杨晓彬" value="13" /></td>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid">&nbsp;杨晓彬</td>
        </tr>
        <tr>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" align="center"><input type="checkbox" name="服务器" value="14" /></td>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid">&nbsp;服务器</td>
        </tr>
        <tr>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" align="center"><input type="checkbox" name="浏览器" value="15" /></td>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid">&nbsp;浏览器</td>
        </tr>
        <tr>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" align="center"><input type="checkbox" name="郁钧" value="16" /></td>
            <td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid">&nbsp;郁钧</td>
        </tr>
    </tbody>
</table>
</div>
<div id="multiDropDownTableDivCmd" style="FONT-SIZE: 10pt; LEFT: 85px; PADDING-BOTTOM: 4px; PADDING-TOP: 8px; POSITION: relative"></div>
</div>

    原理其实很简单，就是控制div的隐藏、展示，并注意固定设定div高度和overflow为auto就是了，欢迎排砖……