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 相关文章推荐
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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新手上路(八)
2006/10/09 PHP
几个php应用技巧
2008/03/27 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
php json相关函数用法示例
2017/03/28 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
javascript常用函数(1)
2015/11/04 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
python实现list由于numpy array的转换
2018/04/04 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
学校课外活动总结
2014/05/08 职场文书
北京天坛导游词
2015/02/12 职场文书
圣诞晚会主持词
2015/07/01 职场文书
《实心球》教学反思
2016/02/23 职场文书
Python如何配置环境变量详解
2021/05/18 Python
基于docker安装zabbix的详细教程
2022/06/05 Servers
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python