下拉框上下排序和移动

最新推荐文章于 2022-02-21 13:30:24 发布

kevin_wangwei

最新推荐文章于 2022-02-21 13:30:24 发布

阅读量226

点赞数

分类专栏： jQuery 文章标签： JavaScript UP HTML ViewUI

本文链接：https://blog.csdn.net/kevin_wangwei/article/details/83776451

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<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();
});
});