删除项目后重置下拉列表

时间:2013-11-03 15:13:08

标签: jquery

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

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

1 个答案:

答案 0 :(得分:0)

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

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