Question

我不能让这个小脚本工作：Fiddle

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

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]的原因而是直接id选择器，如(#)。

Answer 1

我设法让它将所有代码重写为整齐的一行。

JSFiddle: (MOVE option to the other element) - http://jsfiddle.net/GJJQw/
JSFiddle: (COPY option to the other element) - http://jsfiddle.net/dEE7A/

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

$('[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()，您会将选项复制到其他选择，否则remove()会将其从此select元素中删除，并将其附加到另一个。< / p>

Answer 2

请参阅此更新后的小提琴，http://jsfiddle.net/NpTzR/1/

您的代码中存在两个问题，

1，获取所选选项的代码是错误的。以下是应该如何做的。

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

第二，获取移动选项的选择的代码是错误的。我想不出一种在不使用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选择器，因为我不知道下一个select的id / name，并且我在同一个webform上有很多这些（是的，我知道，无论如何这都是一个糟糕而丑陋的形式.. 。）

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

恶魔oneliner 3： - ）

再次感谢埃里克

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

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

4 个答案: