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

Question

我目前select使用下拉元素：

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

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

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

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

<option>value</option>

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

$('#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"，我无法控制 html。

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

Answer 1

您可以动态更改 HTML，方法是将 value 属性添加到 option 没有属性的元素，并使用 option 的 .text() =] 作为 .value。然后，您可以像现在一样继续使用 select 选项。改变 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>

Answer 2

从 :

偷了整块布

您可以使用 jQuery contains 选择器

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

Answer 3

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

对于使用 WebDriverIO 的人，我发现 this discussion 使用 select 或

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

因此，对于我的示例，我使用了

$('option*=value')

但是，我注意到我无法在单个 select 中很好地链接各种 select，例如

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

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

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

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

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

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

Get dropdown option element by display text

javascript

jquery

webdriver-io