Question

我目前正在使用以下方式选择下拉元素：

$('#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.

我无法添加值=＆＃34;值＆＃34;对象，我无法控制html。

编辑：我意识到WebdriverIO虽然使用类似于jQuery的选择器，但并不一定具备所有相同的功能。 Nathan Hinchey似乎可以为普通的jQuery工作。

Answer 1

您可以通过向没有value元素的option元素添加.text()属性来动态更改HTML，并使用option的{{1}}作为{{ 1}}。然后，您可以继续选择已有的选项。改变DOM（可能是广泛的）会有性能成本，所以要小心。

.value

// 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());

Answer 2

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

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

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

所以，对于我的例子，我使用了

$('option*=value')

然而，我注意到我无法在单个选择中很好地链接各种选择，例如

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

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

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

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

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

按显示文字

2 个答案: