Получить выпадающий элемент option по отображаемому тексту

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.

Я не могу добавить значение = "значение" к объекту, у меня нет контроля над HTML.

Редактировать: я понимаю, что WebdriverIO, хотя он использует селекторы, подобные jQuery, не обязательно имеет все те же функциональные возможности.Тем не менее, Натан Хинчи, кажется, работает на обычную jQuery.

Answer 1

Украденная целая ткань из этого ответа :

Вы можете использовать селектор jQuery contains

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

Answer 2

Ответ Натана Хинчи работает для людей, использующих базу jQuery.

Для людей, использующих WebDriverIO, я нашел это обсуждение , в котором используется селектор

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

Такдля моего примера я использовал

$('option*=value')

Однако я заметил, что не могу красиво соединить различные выборки в одном выделении, например

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

Если вам нужно выполнить цепочкулюбые варианты выбора перед ним, такие как, возможно, объект выбора, содержащий параметры, вместо этого используйте

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

В настоящее время я использую это для получения родительского объекта, объекта.

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

Answer 3

Вы можете динамически изменять HTML, добавив атрибут value к элементам option, у которых его нет, и используйте .text() из option в качестве .value.Затем вы можете продолжить выбирать параметры, как вы уже есть.Изменение 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>