1

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

这是一个显示问题的jsFiddle。

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

问题 1：应该发生在第 5 步，其中两次触发警报。

我假设发生这种情况是因为警报在.each()方法内，因此会为每个现有选项触发它。

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

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

我还应该注意我尝试的另一个角度是.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;
        }
    }
}
4

1 回答 1

4

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

$(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();
    });
});

小提琴

或者只是克隆它们？

$(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();
    });
});

小提琴

于 2013-10-18T18:09:33.750 回答