这篇文章主要介绍了 JS+CSS 实现实用的单击输入框弹出选择框的方法, 实例分析了 javascript 操作 select 及 button 的操作技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JS+CSS 实现实用的单击输入框弹出选择框的方法。分享给大家供大家参考。具体实现方法如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- JS+CSS打造实用的单击输入框弹出选择框效果
- </title>
- <style type="text/css">
- .black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:#FFFFFF;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}
- .white_content{display:none;position:absolute;top:25%;left:25%;width:50%;height:50%;padding:16px;border:16px
- solid orange;margin:-32px;background-color:white;z-index:1002;overflow:auto;}
- </style>
- <script language="javascript" type="text/javascript">
- function moveselect(obj, target, all) {
- if (!all) all = 0
- if (obj != "[object]") obj = eval("document.all." + obj) target = eval("document.all." + target)
- if (all == 0) {
- while (obj.selectedIndex > -1) { //alert(obj.selectedIndex)
- mot = obj.options[obj.selectedIndex].text mov = obj.options[obj.selectedIndex].value obj.remove(obj.selectedIndex)
- var newoption = document.createElement("OPTION"); newoption.text = mot newoption.value = mov target.add(newoption)
- }
- }
- else { //alert(obj.options.length)
- for (i = 0; i < obj.length; i++) { mot = obj.options[i].text mov = obj.options[i].value
- var newoption = document.createElement("OPTION"); newoption.text = mot newoption.value = mov target.add(newoption)
- }
- obj.options.length = 0
- }
- }
- function dakai() {
- document.getElementById('light').style.display = 'block';
- document.getElementById('fade').style.display = 'block'
- }
- function guanbi() {
- //把右边select的值传到文本框内
- var yuanGong = document.getElementById("yuanGong") yuanGong.value = "" //如果不加这句,则每次选择的结果追加
- var huoQu = document.getElementById("D2") for (var k = 0; k < huoQu.length; k++) yuanGong.value = yuanGong.value + huoQu.options[k].value + " " //" "中间为空格,字符分隔符,可以改成别的
- document.getElementById('light').style.display = 'none';
- document.getElementById('fade').style.display = 'none'
- }
- </script>
- </head>
- <body>
- <input type="text" id="yuanGong" onclick="dakai()" size="50">
- <div id="light" class="white_content">
- <table border="1" width="350" id="table4" bordercolor="#CCCCCC" bordercolordark="#CCCCCC"
- bordercolorlight="#FFFFFF" cellpadding="3" cellspacing="0">
- <tr>
- <td width="150" height="200" align="center" valign="middle">
- 本部门员工
- <select size="12" name="D1" ondblclick="moveselect(this,'D2')" multiple="multiple"
- style="width:140px">
- <option value="张三">
- 张三
- </option>
- <option value="李四">
- 李四
- </option>
- <option value="小王">
- 小王
- </option>
- </select>
- </td>
- <td width="50" height="200" align="center" valign="middle">
- <input type="button" value="<<" name="B3" onclick="moveselect('D2','D1',1)">
- <br>
- <input type="button" value="<" name="B5" onclick="moveselect('D2','D1')">
- <br>
- <input type="button" value=">" name="B6" onclick="moveselect('D1','D2')">
- <br>
- <input type="button" value=">>" name="B4" onclick="moveselect('D1','D2',1)">
- <br>
- </td>
- <td width="150" height="200" align="center" valign="middle">
- 等待划分部门的员工
- <select size="12" name="D2" id="D2" ondblclick="moveselect(this,'D1')"
- multiple="multiple" style="width:140px">
- <option value="员工X">
- 员工X
- </option>
- <option value="员工Y">
- 员工Y
- </option>
- </select>
- </td>
- </tr>
- </table>
- <a href="javascript:void(0)" onclick="guanbi()">
- 确定
- </a>
- <input type="button" name="button" onclick="guanbi()" value="按钮也可确定">
- </div>
- <div id="fade" class="black_overlay">
- </div>
- </body>
- </html>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: