javascript - 在标记为列表的下拉列表中选择元素

Question

我正在尝试遍历下拉框内的所有元素...但是与带有值的典型 html 框不同，这些都是 UL/LI。这是 html 的样子:

<ul class="ui-selectmenu-menu ui-widget ui-widget-content ui-selectmenu-menu-dropdown ui-corner-bottom jfpw-select ui-selectmenu-open" aria-hidden="false" role="listbox" aria-labelledby="currentStatementsDate-button" id="currentStatementsDate-menu" aria-activedescendant="currentStatementDateOptions" tabindex="0" style="width: 328px; height: 160px; float: left; overflow: hidden; outline: none; z-index: 0; top: 0px; left: 0px; position: relative; border-style: none;">
   <li role="option" tabindex="-1" aria-selected="false" id="currentStatementDateOptions" class=""><span class="ui-selectmenu-item-header">Unbilled</span></li>
   <li role="option" tabindex="-1" aria-selected="true" id="currentStatementDateOptions" class="ui-selectmenu-item-selected"><span class="ui-selectmenu-item-header">September 10, 2015</span></li>
   <li role="option" tabindex="-1" aria-selected="false" id="currentStatementDateOptions" class=""><span class="ui-selectmenu-item-header">August 12, 2015</span></li>
   <li role="option" tabindex="-1" aria-selected="false" id="currentStatementDateOptions" class=""><span class="ui-selectmenu-item-header">July 10, 2015</span></li>
   <li role="option" tabindex="-1" aria-selected="false" id="currentStatementDateOptions" class=""><span class="ui-selectmenu-item-header">June 10, 2015</span></li>
   <li role="option" tabindex="-1" aria-selected="false" id="currentStatementDateOptions" class="ui-corner-bottom"><span class="ui-selectmenu-item-header">May 12, 2015</span></li>
</ul>

我需要以某种方式选择每个列表项...但由于这些不同于典型的下拉列表，我不确定。

我猜我需要为每次交互更改属性 (aria-selected) 和类 (the selected)，但我不确定如何进行，因为它们都具有相同的 ID。

Answer 1

您想要做的是获取 LI 的集合并遍历集合，对每个集合执行 .click()(以及其他任何操作)。这可以使用下面的代码轻松完成。

driver.findElement(By.id("currentStatementsDate-menu")).click();
List<WebElement> options = driver.findElements(By.cssSelector("#currentStatementsDate-menu > li"));
for (WebElement option : options)
{
    option.click();
    // do something here? validations, etc.
}

CSS 选择器 #currentStatementsDate-menu > li 读取具有 ID (#) currentStatementsDate-menu 的子元素 ( >) 是 LI。

阅读更多关于 CSS selectors 的信息.

---

编辑 1:我敢打赌，您必须先单击“下拉菜单”，然后才能单击其中的元素。添加了初始点击。