下拉框上下排序和移动

kevin_wanwei

浏览: 117618 次
性别:
来自: 上海

最近访客更多访客>>

huzhiren

zxp209

kacyqian

yanjiaxin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

JavaScript UP HTML

<html>
<head>
<script language="text/javascript" src="jquery1.4.js"></script>
</head>
<body>
   <table align="center">
     <tr>
      <td>
     <select size="8" id="select1" style="width: 150px;height: 500px;">
    <option >1</option>
    <option >2</option>
    <option >3</option>
    <option >4</option>
    <option >5</option>
    <option >6</option>
    <option >7</option>
    <option >8</option>
   </select>
      </td>
      <td>
       <ul>
       <li><a href="javascript:void(0);" id="rightall" >RightAll</a></li>
       <li><a href="javascript:void(0);" id="right" >Right</a></li>
       <li><a href="javascript:void(0);" id="left" >Left</a></li>
       <li><a href="javascript:void(0);" id="leftall" >LeftAll</a></li>
       </ul>
      </td>
      <td>
       <select size="8" id="select2" style="width: 150px;height: 500px;">
       </select>
      </td>
      <td>
       <ul>
       <li><a href="javascript:void(0);" id="up" >up</a></li>
       <li><a href="javascript:void(0);" id="down" >down</a></li>
       </ul>
      </td>
     </tr>
   </table>
</body>
</html>
<script type="text/javascript">
$(function(){
$('#rightall').click(function(){
  var options=$('#select1 option').remove();
  $('#select2').append(options);
});

$('#right').click(function(){
  var options=$('#select1 option:selected').remove();
  $('#select2').append(options);
});

$('#left').click(function(){
  var options=$('#select2 option:selected').remove();
  $('#select1').append(options);
});

$('#leftall').click(function(){
  var options=$('#select2 option').remove();

  $('#select1').append(options);
});
var selectObj2=document.getElementById('select2');
$('#up').click(function (){
  var selIndex=selectObj2.selectedIndex;
  if(selIndex<=0){
   return;
  }
  var selValue=selectObj2.options[selIndex].value;
  var selText=selectObj2.options[selIndex].text;
  selectObj2.options[selIndex].value=selectObj2.options[selIndex-1].value;
  selectObj2.options[selIndex].text=selectObj2.options[selIndex-1].text;
  selectObj2.options[selIndex-1].value=selValue;
  selectObj2.options[selIndex-1].text=selText;
  selectObj2.selectedIndex=selIndex-1;
});

$('#down').click(function (){
   var selIndex=selectObj2.selectedIndex;
   if(selIndex==selectObj2.options.length-1){
    return;
   }
   var selValue=selectObj2.options[selIndex].value;
   var selText=selectObj2.options[selIndex].text;
   selectObj2.options[selIndex].value=selectObj2.options[selIndex+1].value;
   selectObj2.options[selIndex].text=selectObj2.options[selIndex+1].text;
   selectObj2.options[selIndex+1].value=selValue;
   selectObj2.options[selIndex+1].text=selText;
   selectObj2.selectedIndex=selIndex+1;
});

$('#close').click(function (){
   window_kill();
});

$('#save').click(function (){
  var options='';
  $('#select2 option').each(function(){
   options+=$(this).text()+",";
  });
  $('#selects').val(options);
  document.listForm.submit();
});
});

</script>

分享到：

要读书 | 格言名句

2010-12-08 18:26
浏览 1016
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论