javascript - jquery-按钮从一个选择中删除所有选项并添加到另一个选择

Question

我有以下内容

<div class="container-fluid" style="padding-left:32px">
      <div class=container-fluid>
        <select id="leftValues" size="10" multiple>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </div>
    <div class="container-fluid center">
        <input type="button" id="btnLeft" value="&lt;&lt;" />
        <input type="button" id="btnRight" value="&gt;&gt;" />
    </div>
    <div class='container-fluid'>
        <select id="rightValues" size="10" multiple></select>
    </div>
</div>

<script language='javascript'>
$("#btnLeft").click(function() {
var values = $("#rightValues>option").map(function() { return $(this).val(); });
$.each(values, function(key, value) {   
     $('#leftValues')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value));
});

 $('#rightValues').html('');
});

$("#btnRight").click(function() {
var values = $("#leftValues>option").map(function() { return $(this).val(); });
$.each(values, function(key, value) {   
     $('#rightValues')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value));
});

 $('#leftValues').html('');
});
</script>

这目前是有效的，但似乎是一种非常低效的方法，可以从一个选择中删除所有选项以将它们移动到另一个。在 Jquery(也许是纯 JS)中有没有更简单的方法来做到这一点？

编辑

来自karin的解决方案:

$("#btnLeft").click(function() {
        $('#leftValues').html($('#rightValues').html());
        $('#rightValues').html('');
    });

$("#btnRight").click(function() {
    $('#rightValues').html($('#leftValues').html());
    $('#leftValues').html('');
 });

$("#rightValues").dblclick(function() {
    var selectedItem = $("#rightValues option:selected");
    $("#leftValues").append(selectedItem);
});

$("#leftValues").dblclick(function() {
    var selectedItem = $("#leftValues option:selected");
    $("#rightValues").append(selectedItem);
});

问题是，我最初遗漏了 dblclick 事件。如果我在右栏中双击了一个东西，然后使用箭头按钮将其返回到左侧列表，它会在我需要将其添加到内容中时替换内容。

Answer 1

小提示:问题中提供的代码实际上并不能完全正确地工作...它传输索引而不是列的值；)

在这种情况下，您可以将 JS 简化为:

  $("#btnLeft").click(function() {
    $('#leftValues').html($('#rightValues').html());
    $('#rightValues').html('');
  });

  $("#btnRight").click(function() {
    $('#rightValues').html($('#leftValues').html());
    $('#leftValues').html('');
  });

这是一个 fiddle使用该代码。

编辑:

要获得更新后的问题要求的行为:

  $("#btnLeft").click(function() {
    var items = $("#rightValues option");
    $('#leftValues').append(items);
  });

  $("#btnRight").click(function() {
    var items = $("#leftValues option");
    $('#rightValues').append(items);
  });

  $("#rightValues").dblclick(function() {
    var selectedItem = $("#rightValues option:selected");
    $("#leftValues").append(selectedItem);
  });

  $("#leftValues").dblclick(function() {
    var selectedItem = $("#leftValues option:selected");
    $("#rightValues").append(selectedItem);
  });

这是更新的 fiddle .