select multiple 多选 移除

select multiple 多选  移除

此代码通过实例验证

<html>
<title>select,multiple</title>
<head>
<mce:script type="text/javascript"><!--
function addOrRomove(method){
 var s1 = document.getElementById("select");
 var s2 = document.getElementById("selected");
 var ids;
 var names;
 var optionArray = new Array();
 if (method == "add"){ //添加
  for (var i=0;i<s1.options.length;i++){
   if (s1.options[i].selected == true){
   optionArray.push(s1.options[i]);
   }
  }
  for (var j in optionArray){
   optionArray[j].selected = false;
   s2.options.appendChild(optionArray[j]);
  }
 }
 else if (method == "remove"){ //删除
  for (var i=0;i<s2.options.length;i++){
   if (s2.options[i].selected == true){
   optionArray.push(s2.options[i]);
   }
  }
  for (var j in optionArray){
   optionArray[j].selected = false;
   s1.options.appendChild(optionArray[j]);
  }
 }
 for(var i=0;i<s2.options.length;i++){
 if(i == 0){
  ids = s2.options[i].value;
  names =  s2.options[i].text;
 }else{
  ids += ","+s2.options[i].value;
  names += ","+s2.options[i].text;
 }
 }
 document.getElementById("ids").value = ids;
 document.getElementById("names").value = names;
}
// --></mce:script>
</head>
 <body>
  <div>
  <table>
   <tr>
    <td>
     <select id="select" multiple="multiple" onDblClick="addOrRomove('add')">
     <option value="1">语文</option>
     <option value="2">数学</option>
     <option value="3">英语</option>
     <option value="4">物理</option>
     <option value="5">化学</option>
     </select>
    </td>
    <td>
     <div>
     <input type="button" value=">>" οnclick="addOrRomove('add');"/>
     </div>
     <div>
     <input type="button" value="<<" οnclick="addOrRomove('remove');"/>
     </div>
    </td>
    <td>
     <select id="selected"  multiple="multiple" onDblClick="addOrRomove('remove')"></select>
    </td>
   </tr>
  </table>
  </div>
  <input type="text" name="ids" id="ids">
  <input type="text" name="names" id="names">
 </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值