两个select的数据移动,支持IE,ff,google浏览器

来源:互联网 发布:红警2网络打不开 xp 编辑:程序博客网 时间:2024/05/02 16:37

<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>&nbsp;</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>

原创粉丝点击