title: selecting value from "bootstrap dropdown" in selenium webdriver?
body: <p>Tool: Selenium Webdriver</p>
  
  <p>I am trying to click on a specific value from a drop-down list. I can do the same via following:</p>
  
  <p>HTML snippet: via "Select" attribute</p>
  
  <pre><code>&lt;select class="regionpicker-state span3 ng-valid ng-dirty" ng-change="updateSelection()" ng-options="a.code as a.name for a in state" ng-model="selectedState"&gt;
    &lt;option class="" value=""&gt;Select&lt;/option&gt;
    &lt;option value="0"&gt;Karnataka&lt;/option&gt;
    &lt;option value="1"&gt;Tamil Nadu&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Option 1 for automation: via "Select" attribute</p>
  
  <pre><code> @FindBy(xpath = ".//*[@id='organization_chosen']/a/span")
     public static WebElement organizationExpand;
   new Select(organizationExpand).selectByVisibleText("abc");
  </code></pre>
  
  <p>But, the above "option 1" code works if the code has "Select" attribute.</p>
  
  <p>What if the devs have coded dropdowns by using "<a href="http://www.benknowscode.com/2013/12/bootstrap-dropdown-button-select-box-control.html" rel="nofollow">bootstrap dropdown</a>" approach?</p>
  
  <p>HTML snippet: via "bootstrap dropdown" approach:</p>
  
  <pre><code>&lt;select id="organization" class="focused" data-placeholder="Choose a organization..." name="organization" style="display: none;"&gt;
     &lt;div id="organization_chosen" class="chosen-container chosen-container-single chosen-container-active" style="width: 220px;" title=""&gt;
        &lt;a class="chosen-single chosen-default" tabindex="-1"&gt;
        &lt;div class="chosen-drop"&gt;
           &lt;div class="chosen-search"&gt;
           &lt;ul class="chosen-results"&gt;
             &lt;li class="active-result" data-option-array-index="1" style=""&gt;Demo&lt;/li&gt;
             &lt;li class="active-result" data-option-array-index="2" style=""&gt;abc&lt;/li&gt;
             &lt;li class="active-result" data-option-array-index="3" style=""&gt;def&lt;/li&gt;
             &lt;li class="active-result" data-option-array-index="4" style=""&gt;xyz&lt;/li&gt;
           &lt;/ul&gt;
  </code></pre>