Question

我有

选择一个看起来像这样的框（您可以在其中选择中，大和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>的{{1}}，并将其分配给value标签的value：

select

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

如果您使用的是jQuery，则可以使用其<select name="size" id="size"> <option value="123">Medium</option> <option value="456">Large</option> <option value="789">XLarge</option> </select>选择器，该选择器允许使用更简洁的语法：

:contains

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

Answer 2

您可以迭代选项，并根据selected对其设置option.text

const setVal=(optText)=>{
  const opts = document.querySelectorAll('#size option');
  for(let opt of opts){
     opt.selected = opt.text === optText;
  }
}

setVal('Large')

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

Answer 3

对于仅允许选择单个选项的select元素，您可以将所选选项的显示文本直接定位为所选HTMLOptionsElement的text属性。

"use strict";

function getOptionText(selectId) {
    let select = document.getElementById( selectId);
    let index = select.selectedIndex;
    return index < 0 ? "" : select.options[index].text;

}

// test

   document.getElementById("size")
   .addEventListener("change",
      function( event) {
          console.log( getOptionText("size"));
      }
      , false);

<select name="size" id="size">
  <option value = "48817">Medium</option>
  <option value = "48818">Large</option>
  <option value = "48819">XLarge</option>
</select>

请注意，这可能有助于向客户提供反馈，但是不建议在程序业务逻辑中使用它-程序数据将取决于HTML页面文本内容语言和术语选择：将“ XLarge”更改为“ XL”并且停止工作。

您如何在javascript中获取名称（文本）的值？

3 个答案: