您如何在javascript中获取名称(文本)的值?

时间:2018-09-11 22:10:44

标签: javascript html

我有enter image description here

选择一个看起来像这样的框(您可以在其中选择中,大和XLarge):

enter image description here

我只是找不到您如何获得文本的价值。因此,例如,我想知道文本“ XLarge”的值,以在上方的框中选择XLarge。你怎么做到的?

我已经通过知道值来做到这一点。然后,将选择XLarge:

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

如果您只是不想真正了解XLarge的价值,怎么办?我想像是这样,但是没有用:

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

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

3 个答案:

答案 0 :(得分:5)

您将必须遍历每个<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()
);

答案 1 :(得分: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>

答案 2 :(得分:1)

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

"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”并且停止工作。