选择一个看起来像这样的框(您可以在其中选择中,大和XLarge):
我只是找不到您如何获得文本的价值。因此,例如,我想知道文本“ XLarge”的值,以在上方的框中选择XLarge。你怎么做到的?
我已经通过知道值来做到这一点。然后,将选择XLarge:
document.getElementsByName("size")[0].value=48819;
如果您只是不想真正了解XLarge的价值,怎么办?我想像是这样,但是没有用:
document.getElementsByName("size")[0].value=document.getElementById("XLarge").value;
我希望有人有一个主意,因为我已经阅读了许多主题,希望找到相似的东西,或者也许我只是忘了添加一些东西。 :S
答案 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元素,您可以将所选选项的显示文本直接定位为所选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”并且停止工作。