Question

我正在尝试设置选项以移至列表的顶部或底部。关于如何使用jquery

的任何想法

$(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="4">4</option>
</select>
<input type="button" value="Up">
<input type="button" value="Down">
<input type="button" value="Top">
<input type="button" value="Bottom">

Answer 1

＆＃13;

$(document).ready(function() {
  $('input[type="button"]').click(function() {
    var $op = $('#select2 option:selected'),
      $this = $(this);
    console.log($this.val())
    if ($op.length) {
      if ($this.val() == 'Top') {
        $('#select2').prepend($op)
      }else if ($this.val() == 'Bottom') {
        $('#select2').append($op)
      }else if ($this.val() == 'Up') {
       $op.prev().before($op);
      }else if ($this.val() == 'Down') {
        $op.next().after($op);
      }

    }
  });
});

＆＃13;

<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="4">4</option>
</select>
<input type="button" value="Up">
<input type="button" value="Down">
<input type="button" value="Top">
<input type="button" value="Bottom">

＆＃13;

使用.prepend()移动顶部

描述：将参数指定的内容插入匹配元素集中每个元素的开头。

使用.append()移动底部

描述：将参数指定的内容插入到匹配元素集中每个元素的末尾。

如何使用jquery将项目移动到选择列表的顶部和底部

1 个答案: