Question

一些问题我很难搞清楚。我有一个下拉菜单和一个按钮，可以将所选选项添加到multiple select控件。我遇到的第一个问题是当multiple select有多个选项并且您尝试添加的内容已经存在时，会调用已存在选项的警报，但是存在许多选项。要重现我要解释的内容，请按以下步骤操作：

这是显示问题的jsFiddle。

从下拉列表中选择一个选项
点击添加
从下拉列表中选择其他选项
点击添加（多重选择控件中现在应该有两个选项）
再次点击添加（尝试添加您在步骤4中添加的相同选项）

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

我假设发生了这种情况，因为警报在.each()方法范围内，从而导致每个现有选项都会触发警报。

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

执行上面列出的步骤1-4
从下拉列表中选择第三个选项（尚未添加的选项）
点击添加（此处应发生问题）

问题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;
            }
        });
    }
}

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

这是显示此尝试的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

问题添加项目以选择已存在的项目

1 个答案: