左侧下拉框中的内容点击按钮移到右侧下拉框

<form name=”myform” method=”post” >

<select name=”hostlist1” size=”15” multiple=”multiple”>

<option >…..</option>

</select>
<select name=”hostlist2” size=”15” multiple=”multiple”>

</select>

<input name=”addbutton” type=”button” value=”添加” onclick=”dealAgent(document.myform.hostlist2, document.myform.hostlist1)”/>

<input name=”removebutton” type=”button” value=”删除” onclick=”dealAgent(document.myform.hostlist1, document.myform.hostlist2)”/>

<input type=”button” value=”上移”onclick="changepos(hostlist2,-1)" type="button">

<input type=”button” value=”下移”onclick="changepos(hostlist2,1)" type="button">

<input name=”hostvalue” type=”hidden”/>

</form>

<script>

function dealAgent(hostlist1,hostlist2)

{

    for(var i=0;i<hostlist1.options.length;i++)

    {

       if(hostlist1.options[i].selected)

       {

           var host=hostlist1.options[i];

           hostlist2.options.add(new Option(host.text,host.value));

           hostlist1.remove(i);

           i=i-1;

       }

    }

    document.myform.hostvalue.value=getValue(document.myform.hostlist2);

    //document.myform.hostvalue.value=getValue(document.myform.hostlist2);

}

function getValue(hostlist2){

    var hostValue="";

    if(hostlist2.options.length!=0)

       hostValue+=hostlist2.options[0].value;

    for(var i=1;i<hostlist2.options.length;i++){

       hostValue +=","+hostlist2.options[i].value;

    }

    return hostValue;

    }

function changepos(obj,index)

{

if(index==-1){

if (obj.selectedIndex>0){

obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))

}

}

else if(index==1){

if (obj.selectedIndex<obj.options.length-1){

obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))

}

}

}

</script>

 

 

//---jquery实现-----

<script type="text/javascript">
//$(document).ready(function(){
//$("#addbutton").click(function (){
// $("#hostlist1 option:selected").appendTo("#hostlist2");
//});
//$("#removebutton").click(function (){
// $("#hostlist2 option:selected").appendTo("#hostlist1");
//});
//
//$("#add_all").click(function(){
//
// $("#hostlist1 option").appendTo("#hostlist2");
//});
//$("#remove_all").click(function(){
//
// $("#hostlist2 option").appendTo("#hostlist1");
//});
//
//$("#hostlist1").dblclick(function(){
//$("#hostlist1 option:selected").appendTo("#hostlist2");
//
//});
//
//$("#hostlist2").dblclick(function(){
// $("#hostlist2 option:selected").appendTo("#hostlist1");
//});
//
//});

 

</script>