jquery - 删除项目后重置下拉菜单

Question

单击按钮时，我使用分离方法从下拉列表中删除多个项目。我也有一个重置按钮 - 但我不知道如何重置我的下拉菜单。

$("#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