Question

我正在尝试开发一种使用JavaScript或JQuery将选项从一个下拉列表移动到另一个下拉列表的简单方法。然而，我在互联网上发现的每个例子都很老，或者只是简单的不起作用（我自己的知识有点受限）。

有人可以帮我开发一种在下拉列表之间移动选项的简单方法吗？

这是我的HTML：

<select name="sourceSelect" id="sourceSelect" size="3"  onclick="">
  <option value="example1">Example1</option>
  <option value="example2">Example2</option>
  <option value="example3">Example3</option>
</select>


<input type="submit" name="forward" id="forward" value="Forward" onclick=""/>

<input type="submit" name="back" id="back" value="Back" onclick=""/>


<select name="destinationSelect" id="destinationSelect" multiple="multiple" size="3" onclick="">
  <!--EMPTY DROP-DOWN LIST-->
</select>

我认为如果使用数组，可能需要将下拉列表的名称更改为sourceSelect []？我还添加了空的onclick，但我不确定是否有必要这样做？

Answer 1

Here是一个使用jQuery的工作解决方案：

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

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

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

Answer 2

使用jQuery，最简单的前进按钮代码可以是：

$('#forward').on('click',function(){

    var $selected = $('option:selected','#sourceSelect');
    $selected.each(function(i,e){
        $('#destinationSelect').append(
            $('<option />').val(e.value).html(e.innerHTML)
        );
    });
    $selected.remove();
});

你的后退按钮：

$('#back').on('click',function(){

    var $selected = $('option:selected','#destinationSelect');
    $selected.each(function(i,e){
        $('#sourceSelect').append(
            $('<option />').val(e.value).html(e.innerHTML)
        );
    });
    $selected.remove();
});

实例：http://jsfiddle.net/y6B8Q/

然后你可以随意使用它，如果你愿意，可以制作你自己的jquery插件。

Answer 3

var content_option = $('#sourceSelect option[value="example1"]').contents();
$('#sourceSelect option[value="example1"]').remove();
$('#destinationSelect').append('<option value="example1">'+content_option+'</option>');

Answer 4

Javascript解决方案可以迭代source选项并将其添加到destination，如下所示

    for (i=0;i<sourceSelect.length;i++)
    {
      var newOption = document.createElement('<option value="'+sourceSelect.options[i].text+'">');
      destinationSelect.options.add(newOption);
    }

此外，如果您想要clear来源选择，请添加以下

sourceSelect.innerHTML = ''

在两个下拉列表之间移动选项的简单方法？

4 个答案: