Javascript 如何使用jquery通过按钮上下移动多选中的选定选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6713702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I move selected option in multiselect up and down by buttons using jquery?
提问by devsoft
I have select
我有选择
<select multiple id="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
And two buttons
还有两个按钮
<input type="button" value="Up" onclick="up()">
<input type="button" value="Down" onclick="down()">
How can I move selected option in multiselect up and down by buttons using jquery?
如何使用jquery通过按钮上下移动多选中的选定选项？
回答by Shef
Update: Fixed code for multiple options selected, based on @patrick dw's suggestion.
更新：根据@patrick dw 的建议，选择了多个选项的固定代码。
$(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);
}
});
});
No need to use inline onclick=""event listeners. jQuery takes full control of separating presentation from functionality.
无需使用内联onclick=""事件侦听器。jQuery 完全控制了从功能中分离表现。
回答by sreek
if you do not use jquery
如果你不使用 jquery
function moveUp(){
var select = document.getElementById("columnOrder");
var options = select && select.options;
var selected = [];
for (var i = 0, iLen = options.length; i < iLen; i++) {
if (options[i].selected) {
selected.push(options[i]);
}
}
for (i = 0, iLen = selected.length; i < iLen; i++) {
var index = selected[i].index;
if(index == 0){
break;
}
var temp = selected[i].text;
selected[i].text = options[index - 1].text;
options[index - 1].text = temp;
temp = selected[i].value;
selected[i].value = options[index - 1].value;
options[index - 1].value = temp;
selected[i].selected = false;
options[index - 1].selected = true;
}
}
function moveDown(){
var select = document.getElementById("columnOrder");
var options = select && select.options;
var selected = [];
for (var i = 0, iLen = options.length; i < iLen; i++) {
if (options[i].selected) {
selected.push(options[i]);
}
}
for (i = selected.length - 1, iLen = 0; i >= iLen; i--) {
var index = selected[i].index;
if(index == (options.length - 1)){
break;
}
var temp = selected[i].text;
selected[i].text = options[index + 1].text;
options[index + 1].text = temp;
temp = selected[i].value;
selected[i].value = options[index + 1].value;
options[index + 1].value = temp;
selected[i].selected = false;
options[index + 1].selected = true;
}
}
回答by Yi?it Yener
function up() {
var selected = $("#select2").find(":selected");
var before = selected.prev();
if (before.length > 0)
selected.detach().insertBefore(before);
}
function down() {
var selected = $("#select2").find(":selected");
var next = selected.next();
if (next.length > 0)
selected.detach().insertAfter(next);
}
回答by Chuck Glenn
here is the same idea as the previously-posted non-jquery example, but with some strategic code re-use. My need was to have the buttons always operate on the same select element, named "cols". You could put "sel" as a parameter of the moveUp() and moveDown() functions if you want something more generic.
这里的想法与之前发布的非 jquery 示例相同，但重用了一些战略代码。我的需要是让按钮始终在同一个名为“cols”的选择元素上操作。如果您想要更通用的东西，您可以将“sel”作为 moveUp() 和 moveDown() 函数的参数。
function moveUp() {
var sel = document.getElementById("cols");
var i1=0, i2=1;
while (i2 < sel.options.length) {
swapIf(sel,i1++,i2++);
}
}
function moveDown() {
var sel = document.getElementById("cols");
var i1=sel.options.length-1, i2=i1-1;
while (i1 > 0) {
swapIf(sel,i1--,i2--);
}
}
var swapVar = '';
function swapIf(sel,i1,i2) {
if ( ! sel[i1].selected && sel[i2].selected) {
swapVar = sel[i2].text;
sel[i2].text = sel[i1].text;
sel[i1].text = swapVar;
swapVar = sel[i2].value;
sel[i2].value = sel[i1].value;
sel[i1].value = swapVar;
sel[i1].selected = true;
sel[i2].selected = false;
}
}
回答by Tony Brix
I created a jquery plugin for this: https://github.com/UziTech/jquery.moveSelected.js
我为此创建了一个 jquery 插件：https: //github.com/UziTech/jquery.moveSelected.js
usage:
用法：
$("button#up").click(function(){
$("select").moveSelectedUp();
});
$("button#down").click(function(){
$("select").moveSelectedDown();
});
回答by theGame
<script type="text/javascript">
$(document).ready(function() {
$('li').click(function() {
// the clicked LI
var clicked = $(this);
// all the LIs above the clicked one
var previousAll = clicked.prevAll();
// only proceed if it's not already on top (no previous siblings)
if(previousAll.length > 0) {
// top LI
var top = $(previousAll[previousAll.length - 1]);
// immediately previous LI
var previous = $(previousAll[0]);
// how far up do we need to move the clicked LI?
var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');
// how far down do we need to move the previous siblings?
var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());
// let's move stuff
clicked.css('position', 'relative');
previousAll.css('position', 'relative');
clicked.animate({'top': -moveUp});
previousAll.animate({'top': moveDown}, {complete: function() {
// rearrange the DOM and restore positioning when we're done moving
clicked.parent().prepend(clicked);
clicked.css({'position': 'static', 'top': 0});
previousAll.css({'position': 'static', 'top': 0});
}});
}
});
});
</script>
<ul>
<li><a>Hank</a></li>
<li><a>Alice</a></li>
<li><a>Tom</a></li>
<li><a>Ashlee</a></li>
</ul>
