JS实现单击输入框弹出选择框效果完整实例


Posted in Javascript onDecember 14, 2015

本文实例讲述了JS实现单击输入框弹出选择框效果的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

JS实现单击输入框弹出选择框效果完整实例

完整实例代码如下:

<!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>实用的单击输入框弹出选择框效果
</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<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")
var yuanGongname=document.getElementById("yuanGongname");
yuanGongname.value="";
yuanGong.value=""//如果不加这句,则每次选择的结果追加
var huoQu=document.getElementById("D2")
for(var k=0;k<huoQu.length;k++)
{
yuanGong.value=yuanGong.value + huoQu.options[k].value + " "//这里的" "中间为空格,为字符间的分隔符,可以改成别的
if (yuanGongname.value=="")
{
yuanGongname.value=yuanGongname.value+ huoQu.options[k].text; //这里的" "中间为空格,为字符间的分隔符,可以改成别的
}
else
{
yuanGongname.value=yuanGongname.value+","+ huoQu.options[k].text; //这里的" "中间为空格,为字符间的分隔符,可以改成别的
}
}
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<input type="text" id="yuanGong" onclick="dakai()" size="50">
<input type="text" id="yuanGongname" 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="1">员工1</option>
    <option value="2">员工2</option>
    <option value="3">员工3</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="4">员工4</option>
    <option value="5">员工5</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 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
用客户端js实现带省略号的分页
Apr 27 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
js实现微信聊天效果
Aug 09 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 #Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 #Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 #Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 #Javascript
javascript中new关键字详解
Dec 14 #Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 #Javascript
Position属性之relative用法
Dec 14 #Javascript
You might like
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
vue.js中created方法作用
2018/03/30 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
详解Python迭代和迭代器
2016/03/28 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
python操作oracle的完整教程分享
2018/01/30 Python
pyqt5自定义信号实例解析
2018/01/31 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
详解python的四种内置数据结构
2019/03/19 Python
对python中的装包与解包实例详解
2019/08/24 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
什么造成了Java里面的异常
2016/04/24 面试题
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
人力管理专业毕业生求职信
2014/02/27 职场文书
工商管理专业自荐信
2014/06/03 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
面试感谢信范文
2015/01/22 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
生日寿星公答谢词
2015/09/29 职场文书