本文实例讲述了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 /> 对于 (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 /> </td><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 /> </td><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</option><br /> <option value="员工Y">员工Y</option><br /> </select><br /> </td><br /> </tr><br /> </table><br /> <a href="javascript:void(0)" onclick="guanbi()">确定</a><br /> <input type="button" name="button" onclick="guanbi()" value="按钮也可确定"><br /> </div><br /> <div id="fade" class="black_overlay"></div><br /> </body><br /> </html><br /> </body><br /> </html> 希望本文所述对大家的javascript程序设计有所帮助。
