删除项目后重置下拉列表

Question

单击按钮时，我使用detach-method从下拉列表中删除多个项目。我也有一个重置按钮 - 但我无法确定如何重置我的下拉列表。

$("#presets option[value='" + id + "']").detach();

Answer 1

如果要恢复已删除的项目，并且保留顺序并不重要，解决方案很简单：

var removed = [];
// your buttons to remove single items
$('#remove1').on('click', function () {
    removed.push($('#presets option[value="1"]').detach());
});
$('#remove2').on('click', function () {
    removed.push($('#presets option[value="2"]').detach());
});
// button to restore items
$('#restore').on('click', function () {
    removed.forEach(function ($e) {
        $('#presets').append($e);
    });
});

<强> jsFiddle

---

如果保留顺序很重要，那么您需要在恢复之前对元素进行排序：

var removed = $();
$('#remove1').on('click', function () {
    removed = removed.add($('#presets option[value="1"]').detach());
});
$('#remove2').on('click', function () {
    removed = removed.add($('#presets option[value="2"]').detach());
});
$('#restore').on('click', function () {
    var $opts = removed.add('#presets option');
    removed = $();
    $opts.sort(function(a, b) {
        return parseInt($(a).attr('value')) > parseInt($(b).attr('value'));
    });
    $('#presets').html($opts);
});

<强> jsFiddle