HTML 选择框，如何将所选选项从一个移动/复制到<select>另一个

Question

我无法让这个小脚本工作：Fiddle

我想使用按钮将选定的选项从多选传递到另一个。我认为jQuery选择器在尝试选择所有"option:selected"时存在问题。

HTML:

<div>
    <select id='canselect_code' name='canselect_code' multiple>
        <option value='1'>toto</option>
        <option value='2'>titi</option>
    </select>
    <input type='button' id='btnRight_code' value='  >  ' />
    <br>
    <input type='button' id='btnLeft_code' value='  <  ' />
    <select id='isselect_code' name='isselect_code' multiple>
        <option value='3'>tata</option>
        <option value='4'>tutu</option>
    </select>
</div>

JS-

$('[id^="btnRight"]').click(function (e) {
    var selectedOpts = $(this).prev('select option:selected');
    if (selectedOpts.length === 0) {
        alert('Nothing to move.');
        e.preventDefault();
    } else {
        $(this).next('select').append($(selectedOpts).clone());
        $(selectedOpts).remove();
    }
});
$('[id^="btnLeft"]').click(function (e) {
    var selectedOpts = $(this).next('select option:selected');
    if (selectedOpts.length === 0) {
        alert('Nothing to move.');
        e.preventDefault();
    } else {
        $(this).prev('select').append($(selectedOpts).clone());
        $(selectedOpts).remove();
    }
});

"_code"在我的应用程序中是一个动态代码，这就是我使用[^selector]的原因而是像CCD_ 3这样的直接id选择器。

Answer 1

我成功地将所有代码重写为简洁的一行代码。

JSFiddle：（将选项移动到其他元素）-http://jsfiddle.net/GJJQw/
JSFiddle：（将选项复制到其他元素）-http://jsfiddle.net/dEE7A/

下面的代码COPIES将选择元素放入另一个选择框中。

$('[id^="btnRight"]').click(function (e) {
    $(this).prev('select').find('option:selected').clone().appendTo('#isselect_code');
});
$('[id^="btnLeft"]').click(function (e) {
    $(this).next('select').find('option:selected').clone().appendTo('#canselect_code');
});

如果你想MOVE（即从一个中删除，然后添加到另一个）。。使用此：

$('[id^="btnRight"]').click(function (e) {
    $(this).prev('select').find('option:selected').remove().appendTo('#isselect_code');
});
$('[id^="btnLeft"]').click(function (e) {
    $(this).next('select').find('option:selected').remove().appendTo('#canselect_code');
});

---

下面是一个小的逐步分解：

// the button that was clicked
$(this)
// .next('select') = get the next <select> element
.next('select').
// .find('option:selected') = get all the selected options
.find('option:selected')
// .remove() [or .clone()] = Remove or clone the found options
.remove() // OR .clone()
// .appendTo('#id-of-element') = Append the found elements to the other select box
.appendTo('#canselect_code');

因此，通过将.remove()更改为.clone()，您将把该选项复制到另一个select，否则remove()将把它从这个select元素中删除，并附加到另一个中。

Answer 2

请参阅此更新的fiddle，http://jsfiddle.net/NpTzR/1/

你的代码中有两个问题，

第一，获取所选选项的代码错误。以下是它应该如何。

var selectedOpts = $(this).prev('select').find('option:selected');

第二，获取要将选项移动到的select的代码是错误的。如果不使用css选择器，我想不出一种获取select的方法。在我看来，这样做清楚地传达了意图。

修改后的标记（为每个选择添加一个css类）：

<div>
    <select id='canselect_code' name='canselect_code' multiple class='fl js-rightSelect'>
        <option value='1'>toto</option>
        <option value='2'>titi</option>
    </select>
    <input type='button' id='btnRight_code' value='  >  ' />
    <br>
    <input type='button' id='btnLeft_code' value='  <  ' />
    <select id='isselect_code' name='isselect_code' multiple class='fr js-leftSelect'>
        <option value='3'>tata</option>
        <option value='4'>tutu</option>
    </select>
</div>

修改js

$('[id^="btnRight"]').click(function (e) {
    var $selectedOpts = $(this).prev('select').find('option:selected'),
        $nextSelect = $(this).siblings('.js-leftSelect');
    if ($selectedOpts.length === 0) {
        alert('Nothing to move.');
        e.preventDefault();
    } else {
        $nextSelect.append($selectedOpts.clone());
        $selectedOpts.remove();
    }
});
$('[id^="btnLeft"]').click(function (e) {
    var $selectedOpts = $(this).next('select').find('option:selected'),
        $prevSelect = $(this).siblings('.js-rightSelect');
    if ($selectedOpts.length === 0) {
        alert('Nothing to move.');
        e.preventDefault();
    } else {
        $prevSelect.append($selectedOpts.clone());
        $selectedOpts.remove();
    }
});

Answer 3

感谢您的快速/高质量回答！

这在我的应用程序中非常适用：http://jsfiddle.net/GJJQw/1/

我只是修改了appendTo选择器，因为我不知道下一个选择的id/name，而且我在同一个网络表单上有很多（是的，我知道，这无论如何都是一个糟糕而丑陋的表单…）

JS:

    $('[id^="btnRight"]').click(function (e) {
        $(this).prev('select').find('option:selected').remove().appendTo($(this).nextAll('select'));
    });
    $('[id^="btnLeft"]').click(function (e) {
        $(this).next('select').find('option:selected').remove().appendTo($(this).prevAll('select'));
    });

Demonic oneliner 3:-）

再次感谢Eric

Answer 4

试试这个javascript代码

$(document).ready(function(){
  $("#btnRight_code").click(function(){
    $("#canselect_code option:selected").remove().appendTo($("#isselect_code"));
})
  $("#btnLeft_code").click(function(){
    $("#isselect_code option:selected").remove().appendTo($("#canselect_code"));
})
});