你如何在javascript中获得名称(文本)的价值？

Question

我有

选择一个看起来像这样的框(您可以在Medium,Large和XLarge之间选择):

我只是无法找到你如何获得文本的价值.例如,我想知道文本"XLarge"的值,以在上面的框中选择XLarge.你怎么做到这一点？

我已经设法通过了解价值来做到这一点.然后选择XLarge:

document.getElementsByName("size")[0].value=48819;

如果你只是想让XLarge不知道它的价值,你会怎么做？我想像这样的东西,但它不起作用:

document.getElementsByName("size")[0].value=document.getElementById("XLarge").value;

我希望有人有一个想法,因为我已经阅读了许多已经希望找到相似内容的主题,或者我只是忘了添加一些东西......？:S

Answer 1

您将不得不遍历每个<option>标记并找到textContent与您想要的文本匹配的标记.然后,提取发现<option>的value,并将其分配到value的的select标签:

const size = document.querySelector('#size');
const xLargeOption = Array.prototype.find.call(
  size.children,
  ({ textContent }) => textContent === 'XLarge'
);
size.value = xLargeOption.value;

<select name="size" id="size">
  <option value="123">Medium</option>
  <option value="456">Large</option>
  <option value="789">XLarge</option>
</select>

如果你正在使用jQuery,你可以使用它的:contains选择器,它允许更简洁的语法:

$('#size').val(
  $('option:contains("XLarge")').val()
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="size" id="size">
  <option value="123">Medium</option>
  <option value="456">Large</option>
  <option value="789">XLarge</option>
</select>