从选择框中选择选项

Question

如何使用 javascript（谷歌浏览器中的 /console）选择一个选项？ 这是html代码的一部分：

<nobr>
    Element<br>
    <span class="absatz">
     &nbsp;<br>
    </span>
    <select name="element" class="selectbox" style="width:114" size="12" onchange="doDisplayTimetable(NavBar, topDir);">
        <option value="0">- All -</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">X</option>
        <option value="4">C</option>
        <option value="5">D</option>
        <option value="6">E</option>
        <option value="7">F</option>
        <option value="8">G</option>
        <option value="9">H</option>
        <option value="10">I</option>
        <option value="11">J</option>
        <option value="12">K</option>
        <option value="13">L</option>
        <option value="14">M</option>
        <option value="15">N</option>
        <option value="16">O</option>
        <option value="17">P</option>
        <option value="18">Q</option>
        <option value="19">R</option>
    </select>
</nobr>

或http://pastebin.com/JSaKg4HB

我已经试过了：

document.getElementsByName("element")[0].value = 1;

但它给了我这个错误：

未捕获的类型错误：无法设置未定义的属性“值” 在:2:48 在 Object.InjectedScript._evaluateOn (:875:140) 在 Object.InjectedScript._evaluateAndWrap (:808:34) 在 Object.InjectedScript.evaluate (:664:21)

编辑： 我试过了，但它不适用于整个网站。可能是因为第一个 html 标记内还有另一个 html 标记（如果我下载网站，选择框所在的位置还有另一个名为 welcome.html 的 html 文件。）我认为它在 iFrame 中，因为 chrome 给了我选项“显示框架” ”。

编辑 2： 我可以访问选择框所在的框架，但我仍然找不到选择框。这是框架的代码（不是完整代码）：pastebin.com/iVUeDbYV

Answer 1

试试这个：

document.querySelectorAll('[name="element"]')[0].value;

虽然很奇怪getElementsByName 不适合你。您确定 element 在同一个文档中，而不是在 iFrame 中吗？

Answer 2

简单的答案：

document.getElementById("select_element").selectedIndex = "option index";

其中 option index 是您要激活的下拉菜单中的选项的索引。

您可以使用以下方法获取选项的索引：

var selected = document.querySelector( '#'+div+' > option[value="'+val+'"]' );

其中div是<select>标签的ID。

这有什么帮助！

Answer 3

这会做你想做的。

document.querySelector('[name="element"]').value = 4 // The value you want to select

这将检索值

var value = document.querySelector('[name="element"]').value; // 4

这解释了发生了什么

var option = document.querySelector('[name="element"]');//option element
    option.value; // 4
    option.selectedIndex; // 4
    option.selectedOptions; // [<option value="4">C</option>]
    option.selectedOptions[0].innerText; // C
    option.selectedOptions[0].value; // 4

请记住 selectedOptions 是一个数组，因为可能会选择多个选项，在这种情况下，您将不得不遍历数组以获取每个值。根据 Hanlet Escaño 的评论，确保您的代码设置为在 DOM 加载后执行 。

window.onload = function() {  
    document.querySelector('[name="element"]').value = 0; // sets a default value   
}