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 相关文章推荐
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
Javascript Promise用法详解
May 10 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
原生JavaScript实现留言板
Jan 10 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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
js控制frameSet示例
2013/09/10 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
Vue自定义指令详解
2017/07/28 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
python中reader的next用法
2018/07/24 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python新手学习raise用法
2020/06/03 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
JSF的标签库有哪些
2012/04/27 面试题
学习委员竞选稿
2015/11/20 职场文书
python中print格式化输出的问题
2021/04/16 Python
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js