title: Issue Adding Items to Select Which Already Exist
body: <p>A couple issues I'm having difficulty figuring out. I have a dropdown and a button which adds the selected option to a <code>multiple select</code> control. The first issue I am running into is when the <code>multiple select</code> has more than one option and what you are trying to add already exists, the alert that an option already exists gets called for however many options exist. To reproduce what I am trying to explain, please follow these steps:</p>
  
  <p>Here is a <a href="http://jsfiddle.net/rmf5C/" rel="nofollow"><strong>jsFiddle</strong></a> which shows the issue.</p>
  
  <ol>
  <li>Select an option from the dropdown</li>
  <li>Click Add</li>
  <li>Select a different option from the dropdown</li>
  <li>Click Add (there should now be two options in the multiple select control)</li>
  <li>Click Add again (trying to add the same option which you added in Step 4)</li>
  </ol>
  
  <p><strong>Issue 1:</strong> Should happen in Step 5 in which the alert gets triggered two times.</p>
  
  <p>I'm assuming this is happening because the alert is within the <code>.each()</code> method, thus causing it to be triggered for each existing option.</p>
  
  <p>You can take it a step farther by adding the third option from the dropdown which causes the second issue. After adding the third option, even though at this point it does not exist in the <code>multiple select</code> control, the alert that an option already exists fires. You can then try to add any of the three options and since all three options would then exist, the alert would be triggered three times. Here are the steps to reproduce this:</p>
  
  <ol>
  <li>Perform steps 1-4 as listed above</li>
  <li>Select the third option from the dropdown (the one that has not yet been added)</li>
  <li>Click Add (issue should happen here)</li>
  </ol>
  
  <p><strong>Issue 2:</strong> When you click add, even though that option does not exist at that time, the alert fires.</p>
  
  <p><strong>Question:</strong> What do I need to change so that (issue 1) you are only alerted one time no matter how many options exist in the <code>multiple select</code> control and (issue 2) not alerted when the third option is added since it doesn't exist at the time it is added?</p>
  
  <p>Here is the code that adds the options:</p>
  
  <pre><code>if ($('#lbl1').html() != "") {
      if ($('#select2 &gt; option').length == 0) {
          $('&lt;option&gt;').text(txt).prependTo('#select2')
              .val(txt).prependTo('#select2');
          $('#select2').trigger('change')
              .find('option').prop('selected', true);
      } else if ($('#select2 &gt; option').length &gt;= 1) {
          $('#select2 &gt; option').each(function() {
              if ($('#select2 &gt; option').val() != $('#lbl1').html()) {
                  $('&lt;option&gt;').text(txt).prependTo('#select2')
                      .val(txt).prependTo('#select2');
                  $('#select2').trigger('change')
                      .find('option').prop('selected', true);
              } else {
                  alert('Option already exists.');
                  return;
              }
          });
      }
  }
  </code></pre>
  
  <p>I should also note another angle I tried was moving the <code>.each()</code> method inside the <code>if</code> statement but ran into an issue with that as well. When I tried this way, the first issue does not occur but when you add the third option, it gets added twice.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/WHr5N/" rel="nofollow"><strong>jsFiddle</strong></a> showing this attempt. To reproduce, add all three options. When the third option is added, you should see that it gets added twice.</p>
  
  <p>Here is that code:</p>
  
  <pre><code>if ($('#lbl1').html() != "") {
      if ($('#select2 &gt; option').length == 0) {
          $('&lt;option&gt;').text(txt).prependTo('#select2')
              .val(txt).prependTo('#select2');
          $('#select2').trigger('change')
              .find('option').prop('selected', true);
      } else if ($('#select2 &gt; option').length &gt;= 1) {
          if ($('#select2 &gt; option').val() != $('#lbl1').html()) {
              // Difference is here: moved method inside 'if' statement
              $('#select2 &gt; option').each(function() {
                  $('&lt;option&gt;').text(txt).prependTo('#select2')
                      .val(txt).prependTo('#select2');
                  $('#select2').trigger('change')
                      .find('option').prop('selected', true);
              });
          } else {
              alert('Option already exists.');
              return;
          }
      }
  }
  </code></pre>