左右添加删除SELECT标签的运用

来源:互联网 发布:佳能dpp for mac 编辑:程序博客网 时间:2024/05/16 16:05

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>人员选择</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
 <!-- ~~~~~~~~~~~~联动菜单~~~~~~~~~~~~~XG~~~~~~~~ -->
 <script type="text/javascript" src="resources_oa/javascript/jquery.js"></script>
 <script type="text/javascript" src="resources_oa/javascript/selectjsp.js"></script>
 <!-- ~~~~~~~~~~~~联动菜单~~~~~~~~~~~~~XG~~~~~~~~ -->
 <link rel="stylesheet" type="text/css" href="resources_oa/css/rightview.css">
  </head>
 
  <body style="background-color: #ffffff">
 
<form method="post" name="myform">
<br>
<div align="center"><font size="5"><strong>人员选择</strong></font></div>
  <table border="0" width="300" align="center">
    <tr>
      <td width="40%" align="center">
  <select name="BMselect" id="BMselect" style="width:130px;"  onchange="change();"> </select>
  <select style="width:130px;" id="list1" multiple name="list1"  size="10" ondblclick="moveOption(document.myform.list1, document.myform.list2)">
   
   
  </select>
   </td>
      <td width="20%" align="center">
  <input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br><br>
  <input type="button" value="删除" onclick="delOption(document.myform.list2, document.myform.list1)">
   </td>
      <td width="40%" align="center">
  <select style="width:130px;"  multiple name="list2" size="12" ondblclick="delOption(document.myform.list2, document.myform.list1)">
  </select>
   </td>
    </tr>
  </table>
<div align="center">选定ID:<input type="text" name="user_value" size="40" value="" /></div>
<div align="center">选定name:<input type="text" name="user_name" size="40" value="" /></div>
</form>
<div align="center"><input type="button" value="确定" onclick="closewindows();"></div>
<p align="left">&nbsp;&nbsp;&nbsp;&nbsp;<font size="2">选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。</font></p>
<script language="JavaScript">
<!--
//添加到选择列表
function moveOption(e1, e2){
 var a=false;
 try{
  //判断E1选择项,并添加到E2
  for(var i=0;i<e1.options.length;i++){
   if(e1.options[i].selected){
    var e = e1.options[i];
    for(var j=0;j<e2.options.length;j++){
     if(e.value==e2.options[j].value)
     {
      a=true;
     }
    }
    if(a){
     alert(e.text+"   已经在选择列表内");
    }else
    {
     e2.options.add(new Option(e.text, e.value));
     //e1.remove(i);
     //i=i-1;
    }
   }
  }
  document.myform.user_value.value=getvalue(document.myform.list2);
  document.myform.user_name.value=getname(document.myform.list2);
 }
 catch(e){}
}
//从选择列表删除
function delOption(e1, e2){
 try{
  for(var i=0;i<e1.options.length;i++){
   if(e1.options[i].selected){
     e1.remove(i);
     i=i-1;
   }
  }
  document.myform.user_value.value=getvalue(document.myform.list2);
  document.myform.user_name.value=getname(document.myform.list2);
 }
 catch(e){}
}
//得到选择框的值
function getvalue(geto){
 var allvalue = "";
 for(var i=0;i<geto.options.length;i++){
  allvalue +=geto.options[i].value + ",";
 }
 return allvalue;
}
//得到选择框的文字
function getname(geto){
 var allname = "";
 for(var i=0;i<geto.options.length;i++){
  allname +=geto.options[i].text + ",";
 }
 return allname;
}
//赋值到页面,关闭选择窗口
function closewindows(){
 var allvalue = document.myform.user_value.value;
 var allname = document.myform.user_name.value;
  opener.document.form.username.value=allname;
  opener.document.all.uservalue.value=allvalue;
  window.close();
}
//-->
</script>

  </body>
</html>


 

注意子窗口调用父窗口的方法

opener.document.all.txtuser.value

原创粉丝点击