select标签中的单选和多选解决办法

最新推荐文章于 2025-06-19 03:39:14 发布

原创最新推荐文章于 2025-06-19 03:39:14 发布 · 3.0k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #input #button #class #generator #html

本文介绍了一种使用JavaScript实现HTML中SELECT元素多选功能的方法。通过几个按钮的交互，实现了选项从一个下拉框到另一个下拉框的单移或多移功能，并提供了完整的示例代码。

昨天一朋友问到我关于SELECT实现多选的问题,平时只注意到单选,从没有留意多选,暴汗`````后来在网上查了些例子,感觉多多少少多有些错误.现纠正了保存一份正确的供大家参考.不足之处还望多多指教:)

<!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 $(selectName){return document.getElementById(selectName);}
function PutRightOneClk(selectName){
  if($(selectName+"0").options.selectedIndex==-1){return false;}
  var selectArray = [];
  for(var i=0;i<$(selectName+"0").options.length;i++){
   if($(selectName+"0").options[i].selected){
    var selectItem = new Option();
    selectItem.text=$(selectName+"0").options[i].text;
    selectItem.value=$(selectName+"0").options[i].value
    $(selectName+"1").options.add(selectItem);
    // if(i==0){
    // selectStr = i;
    // }else{
    // selectStr=selectStr+","+i;
    // }
    selectArray.push(i);
   }
  }
  for(i=selectArray.length-1;i>-1;i--){
   $(selectName+"0").options.remove(selectArray[i]);
        }
}

function PutRightAllClk(selectName) {
  if($(selectName+"0").options.length <= 0){return false;}
  for(var i=0;i<$(selectName+"0").options.length;i++){
   var selectItem = new Option();
   selectItem.text=$(selectName+"0").options[i].text;
   selectItem.value=$(selectName+"0").options[i].value
   $(selectName+"1").options.add(selectItem);
  }
  for(i=$(selectName+"0").options.length-1;i>-1;i--){
   $(selectName+"0").options.remove(i);
  }
}

<BODY>
<div style="float:left;">
  <select size="10" id="PtNbrs0" class="input" style="width:300px;height:200px;" multiple="multiple" >
   <option value="test01">Test01</option>
   <option value="test02">Test02</option>
   <option value="test03">Test03</option>
  </select>
</div>
<div style="float:left;padding:0 10 0 10;">
  <input type="button" value="->" id="PutRightOne" class="btnGray" onclick="PutRightOneClk('PtNbrs')" /><br /><br />
  <input type="button" value="->>" id="PutRightAll" class="btnGray" onclick="PutRightAllClk('PtNbrs')" /><br /><br />
  <input type="button" value="<-" id="PutLeftOne" class="btnGray" onclick="PutLeftOneClk('PtNbrs')" /><br /><br />
  <input type="button" value="<<-" id="PutLeftAll" class="btnGray" onclick="PutLeftAllClk('PtNbrs')" />
</div>