<!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>
<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 (typeof obj == "string") obj = document.getElementById(obj)//
 eval("document.all." + obj)
        target =document.getElementById(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')" id="D1" 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>
<br />
 
</body>
</html>