Question

我正在尝试使用以下代码移动，但是当我选择多个选项时，它无法正常工作

如何上下移动多个元素？

<script type="text/javascript">  
  \$().ready(function() { 
//for moving elements up and down
\$('.up-button').click(function(){

 before = \$('#select2 option:selected').prev();
    \$('#select2 option:selected').insertBefore(before);
    });

\$('.down-button').click(function(){
   after = \$('#select2 option:selected').next();
    \$('#select2 option:selected').insertAfter(after);
}); 
   });  
 </script>

您可以在JS live code

找到参考

Answer 1

使用.first()和.last()，因为您选择了多个元素

//for moving elements up and down
$('.up-button').click(function(){
 before = $('#select2 option:selected').first().prev();
    $('#select2 option:selected').insertBefore(before);

});

$('.down-button').click(function(){
   after = $('#select2 option:selected').last().next();
    $('#select2 option:selected').insertAfter(after);
});

Answer 2

稍微改变了逻辑：

$('.up-button').click(function(){
  $('#select2 option:selected:first-child').prop("selected", false);
  before = $('#select2 option:selected:first').prev();
    $('#select2 option:selected').detach().insertBefore(before);

});

$('.down-button').click(function(){
  $('#select2 option:selected:last-child').prop("selected", false);
  after = $('#select2 option:selected:last').next();
    $('#select2 option:selected').detach().insertAfter(after);
});

fiddle

jQuery可在<select> </select> </options>中向上/向下移动多个<options>

2 个答案: