当我将第一个选项移到底部时,有时我在选择列表中看不到该选项,有人可以帮忙吗?
$(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">
最佳答案
这是一个滚动的解决方案:
$('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">
请注意,您仍然可以对其进行微调,仅在需要时滚动,并在向下滚动时将其置于底部(而不是顶部)
关于jquery - 向下移动所选选项不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34765860/