点出窗口，选择类别 -- [页面特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

点出窗口，选择类别

网络 2009/6/17 15:08:52 深山行者字体:大中小浏览 6924

以下为详细代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点出窗口，选择类别</title>
<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>
<style>
.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>
</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="员工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><BR><BR>
<input name="" type="button" onclick="guanbi()" value="要是想用按钮的话就用这个" />
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

前一页:利用DIV+CSS制作右下角弹出留言板

后一页:一个可以说是超级变态,超级强的DIV+CSS应用

相关阅读: httpd.ini一些参数说明; 旅游线路系统; 关于css; 利用ResponseXML的方法调用163天气预报; ASP 格式化显示时间为几个月,几天前,几小时前,几分钟前,或几秒前; 中国青岛春秋国际旅行社有限公司; 利用DIV+CSS制作浮动广告; IIS上传文件大小解处限制的方法

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery下拉到某个固定位置然后某些元素发生改变样式状态; canvas绘制的文字如何换行; 兼容pc、移动端用js实现复制内容到剪切板（支持苹果safari浏览器）; js兼容多个浏览器右下角漂浮广告; 兼容ie6+和火狐的禁止右键; 做在线客服时，聊天窗口的div滚动条始终在底部

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 用GetString来提高ASP的速度; 改进了的，超强的title效果，看了之后，你肯定会喜欢。; 兼容ie6+和火狐的禁止右键; 江苏绿叶国际旅行社; 几种javascript导航菜单; asp远程调用XML

更多标签热门标签

不对齐变化 checkbox max 框移字母 dw 访问量改变关于我们企业 css 透明过滤右键失效 hover 注册鎯排版工作表达 filter 省略 dl 我想你 ie 方法九宫格效果三级系统选择框 em 定制 tag 调节 windows 程序爱墙 asp.net 展示建立日期限制 table 留言板 javascript 斜线硬件 flash 透明快捷表达式绝对管用的iis安装包下载