本文實例講述了JS CSS實現實用的單擊輸入框彈出選擇框的方法。分享給大家供大家參考。具體實作方法如下： 複製程式碼 程式碼如下: JS CSS製作實用的點選輸入框彈出選擇框效果 <br /> .black_overlay{顯示：無；位置：絕對；頂部：0%；左側：0%；寬度：100%；高度：100%；背景顏色：#FFFFFF；z-index：1001；-moz-不透明度： 0.8 ;不透明度:.80;過濾器:alpha(不透明度=80);}<br /> .white_content{顯示：無；位置：絕對；頂部：25%；左側：25%；寬度：50%；高度：50%；填滿：16px；邊框：16px純橘色；邊距：-32px；背景顏色：白色;z-index:1002;溢位:自動;}<br /> </風格><br /> <腳本語言=“javascript”類型=“text/javascript”><br /> 函數 moveselect(obj,目標,全部){<br /> if (!all) all=0<br /> if (obj!="[object]") obj=eval("document.all." obj)<br /> target=eval("document.all." target)<br /> 如果（全部==0）<br /> {<br /> while (obj.selectedIndex>-1){<br /> //alert(obj.selectedIndex)<br /> mot=obj.options[obj.selectedIndex].text<br /> mov=obj.options[obj.selectedIndex].value<br /> obj.remove(obj.selectedIndex)<br /> var newoption=document.createElement("OPTION");<br /> newoption.text=mot<br /> newoption.value=mov<br /> target.add(新選項)<br /> }<br /> }<br /> 其他<br /> {<br /> //alert(obj.options.length)<br /> for (i=0;i<obj.length;i )<br /> {<br /> mot=obj.options[i].text<br /> mov=obj.options[i].value<br /> var newoption=document.createElement("OPTION");<br /> newoption.text=mot<br /> newoption.value=mov<br /> target.add(新選項)<br /> }<br /> obj.options.length=0<br /> }<br /> }<br /> 函數大開(){<br /> document.getElementById('light').style.display='block';<br /> document.getElementById('fade').style.display='block'<br /> }<br /> 函數 guanbi(){<br /> // 文字把右邊選取的值傳到框內<br /> var YuanGong=document.getElementById("yuanGong")<br /> yuanGong.value=""//若不加這句話，則每次選擇的結果追加<br /> var huoQu=document.getElementById("D2")<br /> for(var k=0;k<huoQu.length;k )<br /> YuanGong.value=yuanGong.value huoQu.options[k].value " "//" "中間為空格成空格，字元分隔符，可以改其他<br /> document.getElementById('light').style.display='none';<br /> document.getElementById('fade').style.display='none'<br /> }<br /> </腳本><br /> </頭><br /> <身體><br /> <input type="text" id="yuanGong" onclick="dakai()" size="50"><br /> <div id="light" class="white_content"><br /> <table border="1" width="350" id="table4" bordercolor="#CCCCCC" bordercolordark="#CCCCCC" bordercolorlight="#FFFFFF" cellpadding="3" cellspacing="0"><br /> <tr><br /> <td width="150" height="200"align="center" valign="middle"><br /> 本部員工<br /> <select size="12" name="D1" ondblclick="moveselect(this,'D2')" multiple="multiple" style="width:140px"><br /> <option value="張三">張三<br /> <選項值=「李四」>李四</選項><br /> <選項值=「小王」>小王</選項><br /> </選擇><br /> <br /> <td width="50" height="200"align="center" valign="middle"><br /> <輸入類型=“按鈕”值=“<<” name="B3" onclick="moveselect('D2','D1',1)"><br><br /> <輸入類型=“按鈕”值=“<” name="B5" onclick="moveselect('D2','D1')"><br><br /> <輸入類型=“按鈕”值=“>” name="B6" onclick="moveselect('D1','D2')"><br><br /> <輸入類型=“按鈕”值=“>>” name="B4" onclick="moveselect('D1','D2',1)"><br><br /> <br /> <td width="150" height="200"align="center" valign="middle"><br /> 等待劃分部門的員工<br /> <select size="12" name="D2" id="D2" ondblclick="moveselect(this,'D1')" multiple="multiple" style="width:140px"><br /> <option value="員工X">員工X<br /> <option value="員工Y">員工Y<br /> <br /> <br /> <br /> <br /> <a href="javascript:void(0)" onclick="guanbi()">確定<br /> <input type="button" name="button" onclick="guanbi()" value="按鈕也可確定"><br />
