問題添加項目以選擇已存在的項目

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