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简化为：

$("[id^=btn]").click(function(e) {
  $($(this).data("toggle") + " option")
  .appendTo($(this).siblings().data("toggle"))
});

这是一个fiddle，其代码正在播放中。

修改：

要获取更新后的问题请求的行为：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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" data-toggle="#rightValues" value="<<" /> <input type="button" id="btnRight" data-toggle="#leftValues" value=">>" /> </div> <div class='container-fluid'> <select id="rightValues" size="10" multiple></select> </div> </div> <script language='javascript'> $("[id^=btn]").click(function(e) { $($(this).data("toggle") + " option").appendTo($(this).siblings().data("toggle")) }); </script>

这是一个更新的fiddle。

Answer 2

您可以在引用data-*的{{1}}个元素设置<input type="button">个属性，以便从<select>，option，{{1}中检索.siblings()元素}}

HTML

.data()

的javascript

.appendTo()

<input type="button" id="btnLeft" value="&lt;&lt;"
       data-toggle="#rightValues" />
<input type="button" id="btnRight" value="&gt;&gt;" 
       data-toggle="#leftValues"/>

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

修改

2 个答案: