javascript - .options[e.selectedIndex].innerHTML 没有获取价值

Question

我有一个带有 id 的选择字段的表单。我想在 javascript 函数中获取选定的值。第一次运行此函数时，它不会获取所选值，但第二次运行该函数时，它会获取该函数。我试过.text，这不起作用。非常感谢您的帮助。

var e = document.getElementById("to");
var str = e.options[e.selectedIndex].innerHTML;

Answer 1

那么第一次运行，是在元素渲染之前运行吗？如果是这样，您必须等待 document.ready 或页面加载事件。

获取选择元素的文本和值的工作示例

HTML

<select id="foo">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<button id="bar">Console it</button>

JavaScript

function getText() {
    var sel = document.getElementById("foo");        
    var option = sel.options[sel.selectedIndex];
    //assuming that there is always a selection
    var text = option.text;
    var value = option.value;
    console.log(text, value);
}

document.getElementById("bar").onclick = getText;

getText();

​</p>

工作示例在小提琴中，您可以看到它在尝试读取值时正在运行 onload。

Answer 2

尝试将它放在 onReady 函数中。也许 JS 在页面完全加载之前正在运行？如果您使用 jQuery：

$(document).ready(function(){
    alert($("#to option:selected").text());
)};