多選下拉菜單的一個實現方案 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-211 ; document.getElementById("multiDropDownDiv").style.pixelTop = document.getElementById(inputid).offsetTop + document.getElementById(inputid).parentElement.offsetTop+document.getElementById(inputid).offsetHeight-164; var is = document.getElementById("multiDropDownTableDiv").getElementsByTagName("input"); for (var i=0;i關閉 確定"; 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    先看下效果：  選擇人員

代碼如下：

 <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就是了，歡迎排磚……

a	姓名
	張龍
	趙虎
	楊曉彬
	服務器
	瀏覽器
	鬱鈞