How to handle drop downs using Selenium WebDriver in Java

Question

I'm trying to select certain options from a drop-down menu. The source code is:

<div class="multi ng-isolate-scope" isteven-multi-select="" input-model="genders" output-model="filter.genders" button-label="name" item-label="name" tick-property="ticked" on-select-all="search()" on-select-none="search()" on-item-click="search()" output-properties="id">
<span class="multiSelect inlineBlock buttonClicked">
<button id="" type="button" ng-click="toggleCheckboxes( $event ); refreshSelectedItems(); refreshButton(); prepareGrouping; prepareIndex();" ng-bind-html="varButtonLabel" ng-disabled="disable-button" class="ng-binding">None Selected<span class="caret"></span></button>
  <div
    class="checkboxLayer show">
    <!-- ngIf: helperStatus.filter || helperStatus.all || helperStatus.none || helperStatus.reset -->
    <div class="helperContainer ng-scope" ng-if="helperStatus.filter || helperStatus.all || helperStatus.none || helperStatus.reset ">
      <!-- ngIf: helperStatus.all || helperStatus.none || helperStatus.reset -->
      <div class="line ng-scope" ng-if="helperStatus.all || helperStatus.none || helperStatus.reset ">
        <!-- ngIf: helperStatus.all --><button type="button" class="helperButton ng-binding ng-scope" ng-disabled="isDisabled" ng-if="helperStatus.all" ng-click="select( 'all', $event );" ng-bind-html="lang.selectAll">✓&nbsp;&nbsp;Select All</button>
        <!-- end ngIf: helperStatus.all -->
        <!-- ngIf: helperStatus.none --><button type="button" class="helperButton ng-binding ng-scope" ng-disabled="isDisabled" ng-if="helperStatus.none" ng-click="select( 'none', $event );" ng-bind-html="lang.selectNone">×&nbsp;&nbsp;Select None</button>
        <!-- end ngIf: helperStatus.none -->
        <!-- ngIf: helperStatus.reset --><button type="button" class="helperButton reset ng-binding ng-scope" ng-disabled="isDisabled" ng-if="helperStatus.reset" ng-click="select( 'reset', $event );" ng-bind-html="lang.reset">↶&nbsp;&nbsp;Reset</button>
        <!-- end ngIf: helperStatus.reset -->
      </div>
      <!-- end ngIf: helperStatus.all || helperStatus.none || helperStatus.reset -->
      <!-- ngIf: helperStatus.filter -->
      <div class="line ng-scope" style="position:relative" ng-if="helperStatus.filter"><input placeholder="Search..." type="text" ng-click="select( 'filter', $event )" ng-model="inputLabel.labelFilter" ng-change="searchChanged()" class="inputFilter ng-pristine ng-valid ng-touched" style=""><button type="button" class="clearButton"
          ng-click="clearClicked( $event )">×</button> </div>
      <!-- end ngIf: helperStatus.filter -->
    </div>
    <!-- end ngIf: helperStatus.filter || helperStatus.all || helperStatus.none || helperStatus.reset -->
    <div class="checkBoxContainer">
      <!-- ngRepeat: item in filteredModel | filter:removeGroupEndMarker -->
      <div ng-repeat="item in filteredModel | filter:removeGroupEndMarker" class="multiSelectItem ng-scope vertical" ng-class="{selected: item[ tickProperty ], horizontal: orientationH, vertical: orientationV, multiSelectGroup:item[ groupProperty ], disabled:itemIsDisabled( item )}"
        ng-click="syncItems( item, $event, $index );" ng-mouseleave="removeFocusStyle( tabIndex );" style="">
        <!-- ngRepeat: i in numberToArray( item[ spacingProperty ] ) track by $index -->
        <div class="acol"><label><input class="checkbox focusable" type="checkbox" ng-disabled="itemIsDisabled( item )" ng-checked="item[ tickProperty ]" ng-click="syncItems( item, $event, $index )"><span ng-class="{disabled:itemIsDisabled( item )}" ng-bind-html="writeLabel( item, 'itemLabel' )" class="ng-binding">&nbsp;Male</span></label></div>
        <!-- ngIf: item[ groupProperty ] !== true && item[ tickProperty ] === true -->
      </div>
      <!-- end ngRepeat: item in filteredModel | filter:removeGroupEndMarker -->
      <div ng-repeat="item in filteredModel | filter:removeGroupEndMarker" class="multiSelectItem ng-scope vertical" ng-class="{selected: item[ tickProperty ], horizontal: orientationH, vertical: orientationV, multiSelectGroup:item[ groupProperty ], disabled:itemIsDisabled( item )}"
        ng-click="syncItems( item, $event, $index );" ng-mouseleave="removeFocusStyle( tabIndex );">
        <!-- ngRepeat: i in numberToArray( item[ spacingProperty ] ) track by $index -->
        <div class="acol"><label><input class="checkbox focusable" type="checkbox" ng-disabled="itemIsDisabled( item )" ng-checked="item[ tickProperty ]" ng-click="syncItems( item, $event, $index )"><span ng-class="{disabled:itemIsDisabled( item )}" ng-bind-html="writeLabel( item, 'itemLabel' )" class="ng-binding">&nbsp;Female</span></label></div>
        <!-- ngIf: item[ groupProperty ] !== true && item[ tickProperty ] === true -->
      </div>
      <!-- end ngRepeat: item in filteredModel | filter:removeGroupEndMarker -->
      <div ng-repeat="item in filteredModel | filter:removeGroupEndMarker" class="multiSelectItem ng-scope vertical" ng-class="{selected: item[ tickProperty ], horizontal: orientationH, vertical: orientationV, multiSelectGroup:item[ groupProperty ], disabled:itemIsDisabled( item )}"
        ng-click="syncItems( item, $event, $index );" ng-mouseleave="removeFocusStyle( tabIndex );">
        <!-- ngRepeat: i in numberToArray( item[ spacingProperty ] ) track by $index -->
        <div class="acol"><label><input class="checkbox focusable" type="checkbox" ng-disabled="itemIsDisabled( item )" ng-checked="item[ tickProperty ]" ng-click="syncItems( item, $event, $index )"><span ng-class="{disabled:itemIsDisabled( item )}" ng-bind-html="writeLabel( item, 'itemLabel' )" class="ng-binding">&nbsp;Not Recorded</span></label></div>
        <!-- ngIf: item[ groupProperty ] !== true && item[ tickProperty ] === true -->
      </div>
      <!-- end ngRepeat: item in filteredModel | filter:removeGroupEndMarker -->
    </div>
</div>
</span>
</div>

After doing some research, I realized they all use "By.id", but the source code doesn't have 'id', so I used XPath instead but still it does not work. 

Select gender = new Select(driver.findElement(By.xpath("//*[@id=\"offenderListView\"]/div/div[1]/ul/form/div[2]/span/button")));
gender.selectByVisibleText("Male");

Answer 1

First, find an XPath which will return all values in the drop-down. Then using List, you can select any value.

List<WebElement> myElements = driver.findElements(mySelector);
   for(WebElement e : myElements) {
     if(e.getText().equalsIgnoreCase("Your_Desire_Value")) {
         e.click();
     }

Note:- click on the drop-down first using simple click operation and then use the above code. You may you also need to apply focus if the value is present deep below in the list.