di chuyển xuống tùy chọn đã chọn không hiển thị

Question

khi tôi di chuyển tùy chọn đầu tiên xuống dưới, tại một thời điểm nào đó tôi không thể thấy tùy chọn trong danh sách lựa chọn, bất kỳ ai cũng có thể trợ giúp không?

$(document).ready(function() { 
 
    $('input[type="button"]').click(function() { 
 
    var $op = $('#select2 option:selected'), 
 
     $this = $(this); 
 
    if ($op.length) { 
 
     ($this.val() == 'Up') ? 
 
     $op.first().prev().before($op): 
 
     $op.last().next().after($op); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple id="select2"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="12">12</option> 
 
    <option value="23">23</option> 
 
    <option value="34">34</option> 
 
    <option value="11">11</option> 
 
    <option value="25">25</option> 
 
    <option value="83">83</option> 
 
    <option value="81">81</option> 
 
    <option value="82">82</option> 
 
    <option value="73">73</option> 
 
</select> 
 
<input type="button" value="Up"> 
 
<input type="button" value="Down">

Answer 1

Đây là một giải pháp với di chuyển:

$('input[type="button"]').click(function() { 
 
    var $op = $('#select2 option:selected'), 
 
    $this = $(this); 
 
    if ($op.length) { 
 
    ($this.val() == 'Up') ? 
 
    $op.first().prev().before($op): 
 
     $op.last().next().after($op); 
 
    } 
 

 
    var $s = $('#select2'); 
 
    $s.scrollTop($s.scrollTop() + ($op.offset().top - $s.offset().top)); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple id="select2"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="12">12</option> 
 
    <option value="23">23</option> 
 
    <option value="34">34</option> 
 
    <option value="11">11</option> 
 
    <option value="25">25</option> 
 
    <option value="83">83</option> 
 
    <option value="81">81</option> 
 
    <option value="82">82</option> 
 
    <option value="73">73</option> 
 
</select> 
 
<input type="button" value="Up"> 
 
<input type="button" value="Down">

Lưu ý rằng bạn vẫn có thể tinh chỉnh nó, và chỉ làm cho cuộn khi cần thiết của nó, và có nó ở phía dưới (thay vì đầu) khi bạn cuộn xuống