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 相关文章推荐
不同浏览器的怪癖小结
Jul 11 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
jquery分割字符串的方法
Jun 24 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
解决vue打包 npm run build-test突然不动了的问题
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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
关于js datetime的那点事
2011/11/15 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
js获取class的所有元素
2013/03/28 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python星号*与**用法分析
2018/02/02 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
高中的职业生涯规划书
2013/12/28 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2015年导购员工作总结
2015/04/25 职场文书
北京青年观后感
2015/06/15 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android