JS+CSS实现实用的单击输入框弹出选择框的方法


Posted in Javascript onFebruary 28, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
Vue实现搜索结果高亮显示关键字
May 28 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
layui使用及简单的三级联动实现教程
Dec 01 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 #Javascript
浅谈JavaScript数据类型及转换
Feb 28 #Javascript
javaScript基础语法介绍
Feb 28 #Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 #Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 #Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 #Javascript
浅析JavaScript事件和方法
Feb 28 #Javascript
You might like
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
来自PHP.NET的入门教程
2006/10/09 PHP
php adodb操作mysql数据库
2009/03/19 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python全栈知识点总结
2019/07/01 Python
python实现代码统计器
2019/09/19 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
导游词之西安大清真寺
2019/12/17 职场文书