在HTML网页中用JavaScript实现两个选择框中的内容实现互选

本文链接：https://blog.youkuaiyun.com/Daniellf/article/details/7256504

本文分享了一个使用JavaScript实现的HTML页面示例，该示例展示了如何通过两个选择框进行选项的相互选择与移动。代码包括了两个按钮，分别用于将选项从左侧的选择框移动到右侧的选择框，以及相反的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习javascript,想将一些学习中的东西和大家分享。

在html网页中实现两个选择框中的内容实现互选的源代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">

function moveRight(){
  var addsz=new Array();
  var obj =document.form1.left;
  for(var i=0;i<obj.options.length;i++){
   if(obj.options[i].selected){
    var txt =obj.options[i].text;
    var val =obj.options[i].value;

    var op = new Option(txt,val);
    document.form1.right.options.add(op);
    //document.form1.left.options.remove(obj.options[i]);
   }else{
    addsz.push(obj.options[i]);
     }
   }
  document.form1.left.options.innerHTML="";
  for(var i=0;i<addsz.length;i++){
     document.form1.left.options.add(new Option(addsz[i].text));
   }

}
function moveLeft(){
  var addlf =new Array();
  var obj =document.form1.right;
  for(var i=0;i<obj.options.length;i++){
   if(obj.options[i].selected){
    var txt =obj.options[i].text;
    var val =obj.options[i].value;
    //alert(txt);
    var op = new Option(txt,val);
    document.form1.left.options.add(op);
   }else{
    addlf.push(obj.options[i]);
     }
   }
  document.form1.right.options.innerHTML="";
  for(var i=0;i<addlf.length;i++){
     document.form1.right.options.add(new Option(addlf[i].text));
   }

}
</SCRIPT>
</HEAD>