How can I select drop down menu and click on the drop down item with watir webdriver

Question

My code to click on the Drop Down:

browser.select_list(:class => "ui-select-match").click

My Code to select from the list:

browser.select_list(:name => "system-parameter").clear
puts browser.select_list(:name => "system-parameter").options
browser.select_list(:name => "system-parameter").select("Brand")

HTML to click on Drop down menu:

<div class="ui-select-match" ng-hide="$select.open" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}" placeholder="Select System Parameter">
    <span tabindex="-1" class="btn btn-default form-control ui-select-toggle" aria-label="Select box activate" ng-disabled="$select.disabled" ng-click="$select.activate()" style="outline: 0;">
    <span ng-show="$select.isEmpty()" class="ui-select-placeholder text-muted ng-binding">Select System Parameter</span> 
    <span ng-hide="$select.isEmpty()" class="ui-select-match-text pull-left ng-hide" ng-class="{'ui-select-allow-clear': $select.allowClear &amp;&amp; !$select.isEmpty()}" ng-transclude="">
    <span class="ng-binding ng-scope"></span>
    </span> <i class="caret pull-right" ng-click="$select.toggle($event)">
    </i> <a ng-show="$select.allowClear &amp;&amp; !$select.isEmpty()" aria-label="Select box clear" style="margin-right: 10px" ng-click="$select.clear($event)" class="btn btn-xs btn-link pull-right ng-hide">
    <i class="glyphicon glyphicon-remove" aria-hidden="true">
    </i>
    </a>
    </span>
    </div>

HTML code to select from the list:

<a href="javascript:void(0)" class="ui-select-choices-row-inner" uis-transclude-append="">
<div ng-bind-html="constant.Value | highlight: $select.search" name="Brand" class="ng-binding ng-scope">Brand</div>
</a>

<a href="javascript:void(0)" class="ui-select-choices-row-inner" uis-transclude-append="">
<div ng-bind-html="constant.Value | highlight: $select.search" name="Group" class="ng-binding ng-scope">Group</div>
</a>

<a href="javascript:void(0)" class="ui-select-choices-row-inner" uis-transclude-append="">
<div ng-bind-html="constant.Value | highlight: $select.search" name="Unit" class="ng-binding ng-scope">Unit</div>
</a>

I am trying to click on the Drop-Down list and not able to select also from the list.

Answer 1

You need to use select_list for elements within a select tag as per the ruby docs suggest

See more here Class::Watir::SelectList