jquery - 添加项目以选择已存在的项目时出现问题

Question

有几个问题我很难解决。我有一个下拉菜单和一个按钮，可将所选选项添加到多选控件中。我遇到的第一个问题是，当多重选择有多个选项并且您尝试添加的内容已经存在时，无论存在多少选项，都会调用选项已存在的警报。要重现我试图解释的内容，请按照下列步骤操作:

这是一个jsFiddle这表明了问题。

1. 从下拉列表中选择一个选项
2. 点击“添加”
3. 从下拉列表中选择不同的选项
4. 点击“添加”(多选控件中现在应该有两个选项)
5. 再次点击“添加”(尝试添加您在第 4 步中添加的相同选项)

问题 1:应该发生在步骤 5 中，其中警报被触发两次。

我假设发生这种情况是因为警报位于 .each() 方法中，从而导致每个现有选项都会触发它。

您可以更进一步，从下拉列表中添加第三个选项，这会导致第二个问题。添加第三个选项后，即使此时它不存在于多选控件中，也会触发选项已存在的警报。然后，您可以尝试添加三个选项中的任何一个，由于所有三个选项都将存在，因此警报将被触发三次。以下是重现此问题的步骤:

1. 执行上面列出的步骤 1-4
2. 从下拉列表中选择第三个选项(尚未添加的选项)
3. 点击“添加”(问题应该发生在此处)

问题 2:当您单击“添加”时，即使当时该选项不存在，也会触发警报。

问题:我需要更改什么，以便(问题 1)无论multiple select 控件中存在多少个选项，您都只会收到一次提醒，并且(问题 2) 添加第三个选项时不会收到警报，因为它在添加时不存在？

这是添加选项的代码:

if ($('#lbl1').html() != "") {
    if ($('#select2 > option').length == 0) {
        $('<option>').text(txt).prependTo('#select2')
            .val(txt).prependTo('#select2');
        $('#select2').trigger('change')
            .find('option').prop('selected', true);
    } else if ($('#select2 > option').length >= 1) {
        $('#select2 > option').each(function() {
            if ($('#select2 > option').val() != $('#lbl1').html()) {
                $('<option>').text(txt).prependTo('#select2')
                    .val(txt).prependTo('#select2');
                $('#select2').trigger('change')
                    .find('option').prop('selected', true);
            } else {
                alert('Option already exists.');
                return;
            }
        });
    }
}

我还应该注意到我尝试的另一个角度是在 if 语句内移动 .each() 方法，但也遇到了问题。当我尝试这种方式时，第一个问题不会发生，但是当您添加第三个选项时，它会添加两次。

这是一个jsFiddle展示了这一尝试。要重现，请添加所有三个选项。添加第三个选项后，您应该会看到它被添加了两次。

这是代码:

if ($('#lbl1').html() != "") {
    if ($('#select2 > option').length == 0) {
        $('<option>').text(txt).prependTo('#select2')
            .val(txt).prependTo('#select2');
        $('#select2').trigger('change')
            .find('option').prop('selected', true);
    } else if ($('#select2 > option').length >= 1) {
        if ($('#select2 > option').val() != $('#lbl1').html()) {
            // Difference is here: moved method inside 'if' statement
            $('#select2 > option').each(function() {
                $('<option>').text(txt).prependTo('#select2')
                    .val(txt).prependTo('#select2');
                $('#select2').trigger('change')
                    .find('option').prop('selected', true);
            });
        } else {
            alert('Option already exists.');
            return;
        }
    }
}

Answer 1

我想你所需要的就是这么多:

$(function() {
    var $select1 = $('#select1'), 
        $select2 = $('#select2');

    $('#btnAdd').click(function() {
        var selected = $select1.val();
        if(!selected){
             alert('Select an option');
            return;
        }
        if($select2.find('option[value="' + selected + '"]').length) {
            alert('Option already exists.');
            return;
        }
        $select2.append($('<option/>', {value:selected, text:selected})).find('option').prop('selected', true);

    });

    $('#btnRemove').click(function() {
        $select2.find(':selected').remove();
    });
});

<强> Fiddle

或者只是克隆它们？

$(function() {
    var $select1 = $('#select1'),
                   $select2 = $('#select2');

    $('#btnAdd').click(function() {
        var selected = $select1.val(), 
            $optSel = $select1.find(':selected'),
            $targetSel = $select2.find('option[value="' + selected + '"]');

        if(!selected){
             alert('Select an option');
            return;
        }
        if($targetSel.length) {
            alert('Option already exists.');
            return;
        }

        $select2.append($optSel.clone()).find('option').prop('selected', true);

    });

    $('#btnRemove').click(function() {
        $select2.find(':selected').remove();
    });
});

Fiddle