1

我正在尝试开发一种简单的方法来使用 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，但我不确定是否有必要这样做？

4

4 回答 4

4

这是一个使用 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");
});
于 2012-10-01T11:37:14.917 回答
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 插件。

于 2012-10-01T11:32:41.890 回答
0 
var content_option = $('#sourceSelect option[value="example1"]').contents();
$('#sourceSelect option[value="example1"]').remove();
$('#destinationSelect').append('<option value="example1">'+content_option+'</option>');
于 2012-10-01T11:42:19.800 回答
0

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 = ''
于 2012-10-01T11:47:05.747 回答