两个select的数据移动，支持IE,ff,google浏览器_ie浏览器中有2个select选择器-优快云博客

本文介绍了一个使用HTML和JavaScript实现的选项转移功能示例。该示例展示了如何通过两个下拉选择框进行选项的左右移动，并提供了全选、反选的功能。此功能适用于需要在两个列表间灵活转移选项的场景。

<html>
<head>
<script src="jquery.js" ></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="400px">
<tbody>
    <tr>
      <td colspan="3" align="left" valign="middle" height="30"></td>
    </tr>
    <tr>
      <td align="left" valign="middle" width="145"><select query="getContentList" multiple="multiple" class="shareSelect" size="6" style="width: 150px;" name="shareLeftContent" id="shareLeftContent">
          <option value="98734331090313023147">jack2</option>
        </select>
      </td>
      <td width="32"><p>
          <input id="shareMoveLeft" type="button" value="左移"/>
          <input id="shareMoveRight" type="button" value="右移"/>
        </p></td>
      <td align="right" valign="middle" width="145"><select name="shareRightContent" size="6" class="shareSelect" style="width: 150px;" multiple="MULTIPLE" id="shareRightContent">
        </select></td>
    </tr>
    <tr>
      <td align="left" valign="middle" height="20"><span><a href="#" id="shareSeleLeft" class="commonBlue">全选</a></span><span><a href="#" id="shareunSeleLeft" class="commonBlue">反选</a></span></td>
      <td> </td>
      <td align="left"><span><a href="#" id="shareSeleRight" class="commonBlue">全选</a></span><span><a href="#" id="shareunSeleRight" class="commonBlue">反选</a></span></td>
    </tr>
    <tr>
      <td colspan="3" align="center" valign="middle" height="30"><input onClick="sendMsgSubmit()" class="recomBtn" value="推荐 " type="button"></td>
    </tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
//右移
$("#shareMoveRight").click(function(){
var leftSeleObj = document.getElementById("shareLeftContent");
var rightSeleObj = document.getElementById("shareRightContent");

for(var i =leftSeleObj.length-1;i>=0;i--)
{
  if(leftSeleObj.options[i].selected)
{
  if ($.browser.msie) {
    rightSeleObj.options[rightSeleObj.options.length]=new Option(leftSeleObj.options[i].text,leftSeleObj.options[i].value);
    leftSeleObj.options.remove(i);
  }else
  {
  rightSeleObj.options.add(leftSeleObj.options[i]);
  }
}
}
});
//左移
$("#shareMoveLeft").click(function(){
var leftSeleObj = document.getElementById("shareLeftContent");
var rightSeleObj = document.getElementById("shareRightContent");

for(var i =rightSeleObj.length-1;i>=0;i--)
{
  if(rightSeleObj.options[i].selected)
{
  if ($.browser.msie) {
   leftSeleObj.options[rightSeleObj.options.length]=new Option(rightSeleObj.options[i].text,rightSeleObj.options[i].value);
    rightSeleObj.options.remove(i);
  }else
  {
  leftSeleObj.options.add(rightSeleObj.options[i]);
  }
}
}
});
//左边全选
$("#shareSeleLeft").click(function(){
var leftSeleObj = document.getElementById("shareLeftContent");

for(var i =0;i<leftSeleObj.length;i++)
{
  leftSeleObj.options[i].selected=true;
}
});
//左边反选
$("#shareunSeleLeft").click(function(){
var leftSeleObj = document.getElementById("shareLeftContent");
for(var i =0;i<leftSeleObj.length;i++)
{
  leftSeleObj.options[i].selected=!leftSeleObj.options[i].selected;
}
});
//右边全选
$("#shareSeleRight").click(function(){
var rightSeleObj = document.getElementById("shareRightContent");
for(var i =0;i<rightSeleObj.length;i++)
{
  rightSeleObj.options[i].selected=true;
}
});
//右边反选
$("#shareunSeleRight").click(function(){
var rightSeleObj = document.getElementById("shareRightContent");
for(var i =0;i<rightSeleObj.length;i++)
{
  rightSeleObj.options[i].selected=!rightSeleObj.options[i].selected;
}
});
});
</script>
</body>
</html>