这种效果是怎么实现的

<!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=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {



}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//移到右边
$('#add').click(function() {
//获取选中的选项，删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
   $("option:selected",this).appendTo('#select1');
});

$('#ok').click(function(){
var aa = $('#select2').val();
   alert(aa);
});
});
</script>

</head>
<body>
<div style="float:left;text-align: center;margin: 10px;">
<select multiple="multiple" id="select1" style="width:100px;height:160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<span id="add">选中添加到右边>></span>
<span id="add_all" >全部添加到右边>></span>
</div>
</div>
<div style="float:left;text-align: center;margin: 10px;">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</body>
</html>

你是指java中还是.net中，
java用select的多行显示控件
.net用listBox控件更方便。

好好研究下不难的 js+css

js jquery extjs 之类的都能实现。上边那代码没仔细看，你先你看能不能实现。不能实现再说，我再去给你找我以前的代码

http://archive.plugins.jquery.com/project/multiselect2side

<!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=UTF-8">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<script type="text/javascript">
function func_find(select_obj,option_text){
pos=option_text.indexOf("/")+1;
option_text=option_text.substr(0,pos);

for (j=0; j<select_obj.options.length; j++){
   str=select_obj.options(j).text;
   if(str.indexOf(option_text)>=0)
      return j;
}
return j;
}

function func_insert(){
for (i=formUser.select2.options.length-1; i>=0; i--){
   if(formUser.select2.options(i).selected){
     option_text=formUser.select2.options(i).text;
     option_value=formUser.select2.options(i).value;
     option_style_color=formUser.select2.options(i).style.color;

     var my_option = document.createElement("OPTION");
     my_option.text=option_text;
     my_option.value=option_value;
     my_option.style.color="red";
     my_option.selected = true;

     for(j=formUser.select1.options.length-1;j>=0;j--){
        if(option_text == formUser.select1.options(j).text){
           formUser.select1.remove(j);
        }
     }
     pos=func_find(formUser.select1,option_text);
     formUser.select1.add(my_option,pos);
     formUser.select2.remove(i);
  }
}

}
function func_delete(){
var objectId = document.getElementById("user.objectId").value;
for(i=formUser.select1.options.length-1; i>=0; i--){
   if(formUser.select1.options(i).selected){
     option_text=formUser.select1.options(i).text;
     option_value=formUser.select1.options(i).value;

     var my_option = document.createElement("OPTION");
     my_option.text=option_text;
     my_option.value=option_value;

     pos=func_find(formUser.select2,option_text);
     formUser.select2.add(my_option,pos);
     formUser.select1.remove(i);
  }
}
}function func_select_all1(){
for (i=formUser.select1.options.length-1; i>=0; i--)
   formUser.select1.options(i).selected=true;
}

function func_select_all2(){
for (i=formUser.select2.options.length-1; i>=0; i--)
   formUser.select2.options(i).selected=true;
}

</script>
</head>
<body bgcolor="#CCCCCC">
<form id="formUser" name="formUser">
<s:hidden name="user.objectId" id="user.objectId"></s:hidden>
<s:hidden name="user.TDepart.name" id="user.TDepart.name"></s:hidden>
<s:hidden name="user.type" id="user.type"></s:hidden>
<table border="1" cellspacing="0" cellpadding="3" bordercolorlight="#000000" bordercolordark="#FFFFFF" align='center'>

  <tr>
    <td height="222" align="center" valign="top" bgcolor="#CCCCCC">

    <select  name='select2' id='select2' ondblclick='func_insert();' MULTIPLE style='width:155px;height:280px;'>
     <option>dd</option>
<option>dda</option>
<option>ddd</option>
<option>dddr</option>
<option>ddc</option>
     </select>
     <br>

    <input type="button" value=" 全选 " onclick="func_select_all2();" class="button">
    </td>
    <td align="center" bgcolor="#999999">
      <input type="button" value="添加>>" onclick="func_insert();" title="添加"/>
      <br><br>
      <input type="button"  value="<<删除" onclick="func_delete();" title="删除"/>
    </td>

    <td align="center" valign="top" bgcolor="#CCCCCC">
    <select name="select1" ondblclick="func_delete();"   MULTIPLE style="width:155px;height:280px;">

    </select><br>
    <br/>
    <input type="button" value=" 全选 " onclick="func_select_all1();" class="SmallInput">
    </td>

  </tr>
  <tr>
     <td colspan="4" align="right" bgcolor="#CCCCCC">
      <input type="button" value="确定" onclick="func_submit();"/>  
      <input type="button" value="取消" onclick="func_close();"/>  
     </td>
  </tr>
</table>
</form>
</body>
</html>

调试易

这种效果是怎么实现的

解决方案 »