Question

如何使用javascript选择一个选项（/ google chrome中的/ 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;

但它给了我错误：

未捕获的TypeError：无法设置undefined的属性“value” 时间：2：48 at Object.InjectedScript._evaluateOn（：875：140） at Object.InjectedScript._evaluateAndWrap（：808：34） at Object.InjectedScript.evaluate（：664：21）

编辑：我试过了，但它不适用于完整的网站。也许是因为第一个html标签内有另一个html标签（如果我下载网站，还有另一个名为welcome.html的html文件，其中选择框是。）我认为它在iFrame中，因为chrome给了我选项“show frame ”

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

Answer 1

试试这个：

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

尽管getElementsByName不适合你，但这很奇怪。您确定element是否在同一文档中，而不在iFrame中？

Answer 2

简单的答案：

document.getElementById("select_element").selectedIndex = "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是一个数组，因为可能会选择多个选项，在这种情况下，您必须遍历数组才能获取每个值。根据HanletEscaño的评论，确保您的代码设置为在加载DOM之后执行。

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

从选择框

3 个答案: