2016-07-02 66 views
0

我想設置選項以移動到列表的頂部或底部。關於如何得到這個使用jQuery如何使用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">

回答

3

$(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); 
 
     } 
 

 
    } 
 
    }); 
 
});
<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">

任何想法

使用.prepend()移動頂

說明:插入內容,由指定的PA rameter,到匹配元素集中每個元素的開始。

使用.append()移動底部

說明:插入內容,由參數指定的,所述集合中匹配的元素中的每個元素的結束。

+0

您的片段是不行的,但你的答案是正確的 –

+0

@AminJafari它並選擇1,點擊底部就會把它底部 – guradio

+0

點擊了它去頂它應該移動一步時,如果你點擊沒有任何反應,如果你點擊頂部沒有任何反應,如果你點擊底部它應該是因爲它應該 –

相關問題