通过显示文本获取下拉选项元素答案

【问题标题】：Get dropdown option element by display text通过显示文本获取下拉选项元素
【发布时间】：2018-05-21 17:23:12
【问题描述】：

我目前一直在使用以下方法选择下拉元素：

$('#dropdownId option[value="value"]')

因为我的大部分元素都写成

<option value="value">value</option>

但是，现在我在这个项目中遇到了一些没有 value 属性的元素，而是看起来像

<option>value</option>

现在我正在努力使用我之前使用的相同语法来选择它。我想使用与以前相同的样式来获取元素（不仅仅是更改选择），因为它是在整个项目中动态使用的格式。到目前为止，我已经尝试过这些：

$('#dropdownId option[value="value"]'); // doesn't work, I'd assume because it doesn't have a value attribute
$('#dropdownId option[text="value"]'); // Doesn't work, I'd assume because "text" isn't actually an attribute
$('#dropdownId option[label="value"]'); // Doesn't work, I'd assume because even though the value is used as the display text, it's not actually specified in the attributes.

我无法向对象添加 value="value"，我无法控制 html。

编辑：我意识到 WebdriverIO，虽然它使用类似于 jQuery 的选择器，但不一定具有所有相同的功能。不过，Nathan Hinchey 似乎适用于普通的 jQuery。

【问题讨论】：

这行得通吗？回答“使用 querySelector 通过 InnerHTML 选择元素”stackoverflow.com/a/34645734/5369466
你可以使用 $('#dropdownId option').text()
@MirkoAcimovic 返回选项的文本。这个问题是问如何选择选项。
或者，您可以选择所有没有value ($('option:not([value])')) 的option 标签，然后循环选择没有delete 的标签有你想要的text/innerHtml。不过，这看起来很难看。

标签： javascript jquery webdriver-io

【解决方案1】：

从this answer偷来的整块布：

您可以使用 jQuery contains 选择器

$('option:contains("value")')

【讨论】：

这绝对适用于 jQuery。不幸的是，我意识到我的项目使用并主要复制 jQuery 选择器的 WebdriverIO 不适用于此。
你能像@ScottMarcus 的回答那样使用 JavaScript 来动态修改 HTML 吗？

【解决方案2】：

您可以通过将value 属性添加到没有属性的option 元素并使用option 的.text() 作为.value 来动态更改HTML。然后，您可以继续选择您已经选择的选项。更改 DOM（可能是大量更改）会产生性能成本，因此请注意这一点。

// Get all the <option> elements that don't have a "value" attribute and iterate the group
$("option:not([value])").each(function(){
  // Create the "value" attribute for the option and give it the value of the 
  // current option element's text.
  $(this).attr("value", $(this).text());
});

console.log($("select").html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>  
</select>

【讨论】：

【解决方案3】：

Nathan Hinchey 的回答适用于使用基本 jQuery 的人。

对于使用 WebDriverIO 的人，我发现 this discussion 使用了选择器

$('<element>*=<text>').

所以，在我的例子中，我使用了

$('option*=value')

但是，我注意到我不能很好地在单个选择中链接各种选择，例如

$('select#selectId option*=value')  // WON'T work

如果您需要在它之前链接任何选择，例如可能包含选项的选择对象，请改为使用

$('option*=value').$(elementSelector)

我目前正在使用它来获取父对象，即对象。

$('option*=value').$('..')

【讨论】：