左侧下拉框中的内容点击按钮移到右侧下拉框
<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>