How do I search the next element in a list of multiple dropdowns

Question

It is choosing the same dropdown element twice. Overriding the already selected Captain . How can I ensure that the next element chooses Wicket keeper and not the same one chosen earlier. There is no other way of finding the element but by name.

This is the code:

Select dropC = new Select(driver.findElement(By.name("playerRole")));
dropC.selectByVisibleText("Captain");

Select dropW = new Select(driver.findElement(By.name("playerRole")));
dropW.selectByVisibleText("Wicket Keeper");

This is the html code: select ng-model="playerRole" name="playerRole" id="plr16" ng-change="selectPlayersRole(this)" class="ng-valid ng-dirty ng-valid-parse ng-touched"> Player Captain Wicket Keeper Captain / Wicket Keeper

There is a list of 11 dropdowns and I need to assign one of the dropdown as "captain" and the other as "wicketkeeper".

Answer 1

Take 11 players in an array say String[] players = {"captain", "Wicket Keeper", "Batsman", "Batsman", "Batsman", "Batsman" "Batsman", "Bowler", "Bowler", "Bowler", "Bowler"} then write below code to select them

List<WebElement> playerLocators = driver.findElements(By.name("playerRole"));
int playerCounter = 0;
for(WebElement playerLocator : playerLocators ) {
new Select(playerLocator).selectByVisibleText(players[playerCounter++]);
}

All 11 players in drop downs will be selected respectively.

Note : if there are more than 11 drop downs with the locator By.name("playerRole") , code may fail due to an exception ArrayIndexOutOfBoundsException