Jsp中如何实现选择左边待选框中的一条或多条记录到右边已选框中

大概效果是:左边有一个文本框,里面显示的是根据某一条件查询到的Item,如左边待选框中的内容如下:张三  [email protected]
李四  [email protected]
王五  [email protected]
.
.
.
然后在右边有一个已选框,其中显示的是从左边待选框中选择的一条或多条记录.
如我在左边待选框中选择张三 [email protected]这条记录,并且点击向右移到的键头时,那么左边待选框中这条记录就出现在右边已选框中,左边当然就没有张三 [email protected]这条记录了大虾发发仁慈吧,小弟在此谢了...

解决方案 »

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

楼主可参考这个
<html>
  <head>

<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">
  </head>
  <script language="javascript">
   function chan(){    var objSelect= document.all("a")     for (var i = 0; i < objSelect.options.length; i++) {

         if (objSelect.options[i].selected == true) {


            document.getElementById("b").options.add(new Option(objSelect.options[i].text,objSelect.options[i].value));
         objSelect.options.remove(i);
         }
     }


}
   </script>
  <body>   <select name="a"  multiple="true">
   <option value="1">1111</option>
   <option value="2">2222</option>
   <option value="3">3333</option>
   </select>
   <input type="button" name="dddd" value="添加" onclick="chan()">
   <select name="b" multiple="true">

   </select>
<body>
</html>
<html>
<head>
<script language="javascript" type="text/javascript">
function check_dept()
{
    document.getElementById("left_select").options.length=0;
    var os=new Array();
    os=document.getElementById("dept").options;
    i=os[document.getElementById("dept").selectedIndex].value;
    if(i==1){
        var o1=new Option("张三","1");
        var o2=new Option("张四","2");
        var o3=new Option("张五","3");
        document.getElementById("left_select").add(o1);
        document.getElementById("left_select").add(o2);
        document.getElementById("left_select").add(o3);
    }
    if(i==2){
        var o1=new Option("李三","1");
        var o2=new Option("李四","2");
        var o3=new Option("李五","3");
        document.getElementById("left_select").add(o1);
        document.getElementById("left_select").add(o2);
        document.getElementById("left_select").add(o3);
    }
    if(i==3){
        var o1=new Option("王三","1");
        var o2=new Option("王四","2");
        var o3=new Option("王五","3");
        document.getElementById("left_select").add(o1);
        document.getElementById("left_select").add(o2);
        document.getElementById("left_select").add(o3);
    }
}
function ltor()
{
    var os=new Array();
    os=document.getElementById("left_select").options;
    for(i=0;i<os.length;i++){
        if(os[i].selected){
            var o=new Option(os[i].text,os[i].value);
            document.getElementById("right_select").add(o);
            document.getElementById("left_select").remove(i);
            i--;
        }
    }
}
function rtol()
{
    var os=new Array();
    os=document.getElementById("right_select").options;
    for(i=0;i<os.length;i++){
        if(os[i].selected){
            var o=new Option(os[i].text,os[i].value);
            document.getElementById("left_select").add(o);
            document.getElementById("right_select").remove(i);
            i--;
        }
    }
}
function rtolall()
{
    var os=new Array();
    os=document.getElementById("right_select").options;
    for(i=0;i<os.length;){
        var o=new Option(os[i].text,os[i].value);
        document.getElementById("left_select").add(o);
        document.getElementById("right_select").remove(i);
    }
}
function ltorall()
{
    var os=new Array();
    os=document.getElementById("left_select").options;
    for(i=0;i<os.length;){
        var o=new Option(os[i].text,os[i].value);
        document.getElementById("right_select").add(o);
        document.getElementById("left_select").remove(i);
    }
}
var v;
function queDing(){
var os=new Array();
os=document.getElementById("right_select").options;
v="";
for(var i=0;i<os.length;i++){
v+=os[i].value+":"+os[i].text+" ";
}
opener.document.forms[0].text.value=v;
alert(v);
this.close();
}
</script>
</head><body>
<form>
    <table cellspacing="1" width="350px" align="center">
        <tr><th>选择员工</th></tr>
        <tr><td><select id="dept"  onchange="check_dept()">
            <option selected="selected">选择部门</option>
            <option value="1">学术部</option>
            <option value="2">教质部</option>
            <option value="3">就业部</option>
        </select></td></tr>
        <tr><td>
        <table style="background-color:white" width="100%">
            <tr>
                <td><select multiple="multiple" size="10" id="left_select" style="width : 152px">
                </select></td>
                <td>
                <input type="button" value=">" style="width:35px" onclick="ltor()"><br>
                <input type="button" value=">>" style="width:35px" onclick="ltorall()"><br>
                <input type="button" value="<" style="width:35px" onclick="rtol()"><br>
                <input type="button" value="<<" style="width:35px" onclick="rtolall()"><br>
                </td>
                <td><select multiple="multiple" style="width : 152px" size="10" id="right_select"></select></td>
            </tr>
        </table>
        </td></tr>
        <tr><td align="center"><input type="button" value="确定" onclick="queDing()"></td></tr>
        <tr>
    </table>
</form>
</body></html>
selectDouble生成两个select选择框。左边的为可选数据选择框，右边为已选数据选择框。生成的选择框有排序功能。通过设置可以决定是否可以重复选择等。
<n:selectDouble con="<%=dbc.getConnection()%>" lietshowname="可选数据项" reightshowname="已选数据项" lietSql="select job_id as value,job_desc as text from jobs" />