求一個效果（或控件）

效果大致是這樣的：
左邊一個大的TextBox，中間是Add>>和<<Remove，右邊也是一個大的TextBox.選擇左邊的選項，點Add>>后，會把左邊框框中的東西拉到右邊框框中。
選擇右邊的選項，點<<Remove后，會把右邊框框中東西拉到左邊框框中。
左               中             右
|----------|              |-----------|
|選項一    |              |           |
|選項二    |     Add>>    |           |
|          |   <<Remove   |           |
|          |              |           |
|          |              |           |
|----------|              |-----------|

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

oh,shit,樣式全亂了...-------------                 -------------
|選項一     |                 |           |
|選項二     |       Add  >>   |           |
|           |   << Remove     |           |
|           |                 |           |
|           |                 |           |
|           |                 |           |
-------------                 -------------
<!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>    <script src="../jquery-1.4.2.js" type="text/javascript"></script>    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        div.centent
        {
            float: left;
            text-align: center;
            margin: 10px;
        }
        span
        {
            display: block;
            margin: 2px 2px;
            padding: 4px 10px;
            background: #898989;
            cursor: pointer;
            font-size: 12px;
            color: white;
        }
    </style>    <script type="text/javascript">             $(function() {
            $("#add").click(function() {
                $("#select1 option:selected").appendTo("#select2");
            });            $("#add_all").click(function() {
                $('#select1 option').appendTo('#select2');
            });            $("#remove").click(function() {
                $("#select2 option:selected").appendTo("#select1");
            });            $("#remove_all").click(function() {
                $('#select2 option').appendTo('#select1');
            });            $('#select1').dblclick(function() {                $("option:selected").appendTo('#select2');
            });            $('#select2').dblclick(function() {
                $("option:selected", this).appendTo('#select1');
            });        });
    </script></head>
<body>
    <div class="centent">
        <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 class="centent">
        <select multiple="multiple" id="select2" style="width: 100px; height: 160px;">
            <option value="8">选项8</option>
        </select>
        <div>
            <span id="remove"><<选中删除到左边</span> <span id="remove_all"><<全部删除到左边</span>
        </div>
    </div>
</body>
</html>
<!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>append</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
    $("#add").click(function(){
$("#right").append($("#left option:selected"));
    })
    $("#remove").click(function(){
$("#left").append($("#right option:selected"));
    })
})
    </script></head>
<body>
<select id="left" style="width:100px">
<option>腾讯</option>
<option>奇虎</option>
<option>百度</option>
<option>金山</option>
<option>傲游</option>
<option>讯雷</option>
<option>快播</option>
<option>MSN</option>
<option>UC</option>
<option>飞信</option>
<option>Firefox</option>
<option>chrome</option>
<option>IE</option>
</select>
<input id="add" type="button" name="yourname" value="<<add">
<input id="remove" type="button" name="yourname" value="Remove>>">
<input id="remove" type="button" name="yourname" value="提交到数据库">
<select id="right" style="width:100px"></select>
</body>
</html>
呵呵，两个listbox 搞定
就是删除的时候需要记录编号不能删着数据遍历着
此消息通过【CSDN论坛 Winform测试版】回复！
龙月.NET的博客
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
function $(id){return document.getElementById(id)}function ChangeItem(ServerList,CurrentServerList)
{
var ServerListObject=$(ServerList);
var CurrentServerListObject=$(CurrentServerList);
var additemlsit="";
var additemtext="";
    for(var i=0;i<ServerListObject.length;i++)
{
  if (ServerListObject[i].selected==true)
{
  additemlsit=additemlsit+'|'+ServerListObject[i].value;
  additemtext=additemtext+'|'+ServerListObject[i].text;
}
}
var additemlsit=additemlsit.split('|');
var additemtext=additemtext.split('|');
if(ServerListObject.options.length>0&&ServerListObject.selectedIndex!=-1)
{
for (i=0;i<additemlsit.length;i++)
{
if (additemlsit[i]!='')
{
var opt=document.createElement("OPTION");
opt.text=trim(additemtext[i]);
opt.value=additemlsit[i];
CurrentServerListObject.options.add(opt);
ServerListObject.remove(ServerListObject.selectedIndex);
}
}
}
}
function ChangeAllItem(ServerList,CurrentServerList)
{
var ServerListObject=$(ServerList);
var CurrentServerListObject=$(CurrentServerList);
var index=0;
var length=ServerListObject.options.length;
while(length>0&&index<length)
{
var serverobject=ServerListObject.options[index];
var opt=document.createElement("OPTION");
opt.text=serverobject.text;
opt.value=serverobject.value;
CurrentServerListObject.options.add(opt);
index=index+1;
}
while(ServerListObject.options.length>0)
{
ServerListObject.remove(0)
}
ServerListObject.selectedIndex=-1;
}
function trim(s){
return rtrim(ltrim(s));
}
function trim(s){
return rtrim(ltrim(s));
}
//去左空格;
function ltrim(s){
return s.replace( /^\s*/, "");
}
//去右空格;
function rtrim(s){
return s.replace( /\s*$/, "");
}
</script>
</head><body>
<form name="frm" method="post" action="" >
        <table width="100%" cellpadding="5" cellspacing="0" border="0">
    <tr>
    <td width="40%">
<SELECT  id="CurrentList" style="FONT-SIZE: 11px; WIDTH: 200px; HEIGHT: 200px" multiple size="8" name="CurrentList">
               </SELECT>
</td>
<td width="20%" align="center">
<INPUT style="width:110px" onclick="ChangeItem('List','CurrentList')" type=button value="<<添加"><br><br>
<INPUT style="width:110px" onclick="ChangeItem('CurrentList','List')" type=button value="删除>>"><br><br>
<INPUT style="width:110px" onclick="ChangeAllItem('List','CurrentList')" type=button value="<<<全部添加"><br><br>
<INPUT style="width:110px" onclick="ChangeAllItem('CurrentList','List')" type=button value="全部删除>>"><br><br>
</td>
<td width="40%">
<SELECT id="List"  style="FONT-SIZE: 11px; WIDTH: 200px; HEIGHT: 200px" multiple size="8" name="List">
<option value="0">一</option>
<option value="1">二</option>
<option value="2">三</option>
</SELECT>
</td>
</tr>
</table>
        <input type="hidden" name="select_values" id="select_values" value="">
</form>
</body>
</html>本人测试通过
小弟菜鸟，初学，刚好书有，用ListBox可以达到楼主的效果，以下的是使用数据库的数据，Button1,2,3,4分别是右移，右全移，左移，左全移ListBox的前台代码
<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" Height="164px" SelectionMode="Multiple"
            Style="z-index: 107; left: 282px; position: absolute; top: 166px" Width="128px">
        </asp:ListBox>
        <asp:ListBox ID="ListBox2" runat="server" AutoPostBack="True" Height="164px" SelectionMode="Multiple"
            Style="z-index: 108; left: 518px; position: absolute; top: 166px" Width="128px">
        </asp:ListBox>后台代码
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;public partial class _Default : System.Web.UI.Page
{
    static string connection = "server=.;DataBase=MMIS;User id=sa;pwd=a";
    private SqlConnection sqlConnection1 = new SqlConnection(connection);
    private SqlDataAdapter sqlDataAdapter1 = new SqlDataAdapter();
    private DataSet dataSet11 = new DataSet();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            SqlCommand myCommand = sqlConnection1.CreateCommand();
            myCommand.CommandText = "select * from employeeInfo";
            sqlDataAdapter1.SelectCommand = myCommand;
            dataSet11.Clear();
            int n = sqlDataAdapter1.Fill(dataSet11, "employeeInfo");
            this.DataBind();
            for (int i = 0; i < n; i++)
            {
                string name = dataSet11.Tables["employeeInfo"].Rows[i]["姓名"].ToString();
                ListBox1.Items.Add(name);
            }
            ListBox1.SelectedIndex = 0;
        }    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        int i = 0;
        while (i <= ListBox1.Items.Count - 1)
        {
            if (ListBox1.Items[i].Selected)
            {
                ListBox2.Items.Add(ListBox1.Items[i].Text);
                ListBox1.Items.RemoveAt(i);
            }
            else
                i++;
        }
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        for (int i = 0; i < ListBox1.Items.Count; i++)
        {
            ListBox1.SelectedIndex = i;
            ListBox2.Items.Add(ListBox1.SelectedItem.Text);
        }
        ListBox1.Items.Clear();
    }
    protected void Button3_Click(object sender, EventArgs e)
    {
        int i = 0;
        while (i <= ListBox2.Items.Count - 1)
        {
            if (ListBox2.Items[i].Selected)
            {
                ListBox1.Items.Add(ListBox2.Items[i].Text);
                ListBox2.Items.RemoveAt(i);
            }
            else
                i++;
        }
    }
    protected void Button4_Click(object sender, EventArgs e)
    {
        for (int i = 0; i < ListBox2.Items.Count; i++)
        {
            ListBox2.SelectedIndex = i;
            ListBox1.Items.Add(ListBox2.SelectedItem.Text);
        }
        ListBox2.Items.Clear();
    }
}
楼上有答案了，juery 的纯js 的都有了！
若是服务器控件的话  用ListBox绑定数据源   添加、删除的时候一边的数据源减少item,另一边增加item