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

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

我想使用按钮将所选选项从一个多选传递到另一个多选。 我认为在尝试选择所有选项时jQuery选择器有一个问题：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>

_代码在我的应用程序中是一个动态代码，这就是为什么我使用[^selector]

---

而是直接使用id选择器，如。

请参阅此更新的小提琴

您的代码中有两个问题

首先，获取所选选项的代码错误。以下是它应该是怎样的

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>

---

我成功地将所有代码重写成一行代码

下面的代码将选择元素复制到另一个选择框中

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

如果要移动ie，请从一个ie中删除，然后添加到另一个ie中。。使用以下命令：

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

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

---

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

感谢您的快速/优质回答

这在我的应用程序中非常有效：

我只是修改了appendTo选择器，因为我不知道下一个选择的id/名称，而且我在同一个网络表单上有很多选择。是的，我知道，这是一个糟糕而丑陋的表单

JS:

恶魔一行3：-

再次感谢

---

Eric

试试下面的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"));
})
});

---

非常感谢你的回答！是的，我只是想在接受答案之前在我的应用程序上测试一下。我会发布符合我代码的答案；

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

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

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