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 用6N±1法求素数 实例教程
Oct 20 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
深入理解vue Render函数
Jul 19 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
vue--vuex详解
Apr 15 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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正则表达式基本应用
2011/07/14 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python反转序列的方法实例分析
2018/03/21 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python3.6简单反射操作示例
2018/06/14 Python
Python检查ping终端的方法
2019/01/26 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Django框架请求生命周期实现原理
2020/11/13 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
公司新年寄语
2014/04/04 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
市场部经理岗位职责
2015/02/02 职场文书
2015年超市员工工作总结
2015/05/04 职场文书