title: How can I select from a dropdown list in protractor?
body: <p>I am struggling with attempting to select a product called "some product" from the following drop down menu.  'id="s2id_autogen81"' is the new ID element, I was using that id to grab the item but it was changed to this auto gen value and I'm not sure what to have protractor grab. </p>
  
  <p><strong>From the drop-down menu before selecting it</strong></p>
  
  <pre><code> &lt;div class="select2-container ng-pristine ng-untouched ng-valid" id="s2id_autogen81"&gt;
      &lt;a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1"&gt;   
          &lt;span class="select2-chosen" id="select2-chosen-82"&gt;Select a product&lt;/span&gt;
          &lt;abbr class="select2-search-choice-close"&gt;&lt;/abbr&gt;   
          &lt;span class="select2-arrow" role="presentation"&gt;
              &lt;b role="presentation"&gt;&lt;/b&gt;
          &lt;/span&gt;
      &lt;/a&gt;
      &lt;label for="s2id_autogen82" class="select2-offscreen"&gt;&lt;/label&gt;
      &lt;input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-82" id="s2id_autogen82"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>From the drop-down after selecting it</strong></p>
  
  <pre><code> &lt;div class="select2-drop select2-display-none select2-with-searchbox  select2-drop-active" id="select2-drop" style="left: 86.4375px; width: 258px;  top: 831px; bottom: auto; display: block;"&gt;   
  &lt;div class="select2-search"&gt;       
  &lt;label for="s2id_autogen11_search" class="select2-offscreen"&gt;Product&lt;/label&gt;       
  &lt;input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-11" id="s2id_autogen11_search" placeholder="" aria-activedescendant="select2-result-label-15"&gt;   
  &lt;/div&gt;   
  &lt;ul class="select2-results" role="listbox" id="select2-results-11"&gt;&lt;li class="select2-results-dept-0 select2-result select2-result-selectable ng-binding ng-hide" role="presentation"&gt;
      &lt;div class="select2-result-label" id="select2-result-label-13" role="option"&gt;
      &lt;span class="select2-match"&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;/li&gt;
  &lt;li class="select2-results-dept-0 select2-result select2-result-selectable ng-binding ng-scope" role="presentation"&gt;
      &lt;div class="select2-result-label" id="select2-result-label-14" role="option"&gt;
      &lt;span class="select2-match"&gt;
          &lt;/span&gt;NOT SOME PRODUCT
      &lt;/div&gt;
      &lt;/li&gt;
  &lt;li class="select2-results-dept-0 select2-result select2-result-selectable ng-binding ng-scope select2-highlighted" role="presentation"&gt;
      &lt;div class="select2-result-label" id="select2-result-label-15" role="option"&gt;
      &lt;span class="select2-match"&gt;
          &lt;/span&gt;SOME PRODUCT
      &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>