在select元素中上下移動選項的方法

我有一個下拉選項，選項很少。我想選擇一個元素並上下移動。我已經嘗試過，現在我可以刪除選定的項目，但我不知道如何粘貼它。在select元素中上下移動選項的方法

就像在我的例子中，如果我移動示例2並向上移動示例1應該在末尾，示例2應該在頂部。

$(function() { 
    function cutAndPaste(from, to) { 

     return $(from + " option:selected").each(function() { 
      this.outerHTML; 
     }).remove(); 
    } 

    $("#moveup").off("click").on("click", function() { 
     cutAndPaste("#sourceSelect", "#destinationSelect"); 
    }); 
});

小提琴：http://jsfiddle.net/57f2drgj/

來源

2015-02-23 PSDebugger

爲什麼你使用'關（）'然後'在（）'，什麼是你的'to'參數的在點你的' cutAndPaste功能？ – j08691 2015-02-23 19:31:25

http://stackoverflow.com/questions/6713702/move-item-up-and-down-in-select-using-button – epascarello 2015-02-23 19:32:16

我可能會誤解，但我不認爲'this.outerHTML;'在做什麼都沒有（意思是你在'each'語句中調用的函數是毫無意義的） – 2015-02-23 19:33:11

如果你移動一個元素，你不必remove它第一次。 jQuery的insertBefore和insertAfter函數將會移動它。

您可以使用.is(':first-child')和.is(':last-child')來測試所選選項是第一個還是最後一個。然後你將它移動到最後或開始。

段：

$('#moveup').click(function() { 
 
    var opt = $('#sourceSelect option:selected'); 
 
    
 
    if(opt.is(':first-child')) { 
 
    opt.insertAfter($('#sourceSelect option:last-child')); 
 
    } 
 
    else { 
 
    opt.insertBefore(opt.prev()); 
 
    } 
 
}); 
 

 
$('#movedown').click(function() { 
 
    var opt = $('#sourceSelect option:selected'); 
 
    
 
    if(opt.is(':last-child')) { 
 
    opt.insertBefore($('#sourceSelect option:first-child')); 
 
    } 
 
    else { 
 
    opt.insertAfter(opt.next()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="sourceSelect" id="sourceSelect" multiple="multiple" size="3"> 
 
    <option value="example1">Example1</option> 
 
    <option value="example2">Example2</option> 
 
    <option value="example3">Example3</option> 
 
</select> 
 

 

 
<input type="button" name="moveup" id="moveup" value="up" /> 
 
<input type="button" name="movedown" id="movedown" value="down" />

來源

2015-02-23 20:18:30

類似的東西？

$(function() { 
 
    $("#moveup").click(function() { 
 
     if($("#sourceSelect").prop("selectedIndex") > 0){ 
 
      var selOption = $("#sourceSelect").find(":selected"); 
 
      selOption.insertBefore(selOption.prev()); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="sourceSelect" id="sourceSelect" multiple="multiple" size="3"> 
 
    <option value="example1">Example1</option> 
 
    <option value="example2">Example2</option> 
 
    <option value="example3">Example3</option> 
 
</select> 
 

 

 
<input type="button" name="moveup" id="moveup" value="^" />

來源

2015-02-23 19:38:46

這很好，你甚至不需要if語句。如果沒有以前的兄弟，'insertBefore'會使它保持原位。 – 2015-02-23 19:46:01

謝謝:)如果你願意的話，你可以用同樣的方法使'失望'。只要檢查選定的選項不是最後一個。 – 2015-02-23 19:48:22

再一次，你不需要麻煩檢查。使用這個代碼'selOption.insertAfter（selOption.next（））;'，如果你在最後一個選項，沒有'next'兄弟，'insertAfter'不會做任何事情。 – 2015-02-23 19:52:38

在select元素中上下移動選項的方法

回答

相關問題