Move selected option not visible

Question

when I move the first parameter to the bottom, at some point I don’t see this option in the selection list, can anyone help?

$(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

Here is a scrollable solution:

 $('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"> 

Please note that you can still edit it and only do scrolling when necessary, and have a bottom (instead of top) when scrolling down