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

Question

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

这是一个jsFiddle，它显示了该问题。

1. 从下拉框中选择一个选项
2. 单击添加
3. 从下拉菜单中选择不同的选项
4. 单击Add（现在应该在多种选择控制两个选项）
5. 单击Add （尝试添加您在步骤4中添加的相同选项）

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

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

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

1. 执行步骤1-4以上
2. 所列从下拉框中选择（即尚未被添加的一个）
3. 单击添加第三个选项（问题应当您单击添加，即使该选项不会在那个时候存在，警惕火灾：在这里发生）

第2期。

问：什么我需要在multiple select控制无论多少选择存在改变使（问题1）您只警告一次，（第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