Question

我正在尝试通过javascript操作下拉列表，但每次点击按钮时我似乎都会收到此代码：

TypeError：objDropDownMenu.options未定义

objDropDownMenu.options [1] .selected = true;

这是我的代码：

<FORM NAME="myform" ACTION="" METHOD="GET">
<SELECT class="select diff_data" style="WIDTH: 165px" name=CarPick>
<OPTION value=1>Audi</OPTION>
<OPTION value=2>BMW</OPTION>
<OPTION value=3>Mercedes</OPTION>
</SELECT>

<INPUT TYPE="button" NAME="button2" Value="Write" onClick="writeText(this.form)">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
var objDropDownMenu = document.getElementsByName("CarPick");



function writeText (form) {
    objDropDownMenu.options[30].selected = true;
}
</SCRIPT>

Anyu想法为什么？谢谢！

Answer 1

getElementsByName始终返回array objects。

所以你必须使用： objDropDownMenu[0].options[30].selected = true

更好的方法是为您的选择设置 ID ，然后使用document.getElementById('yourid')，它始终只返回一个对象（因为ID在HTML中始终是唯一的文件）。

Answer 2

我不确定，如果您的代码只是一个示例，但如果没有，那么有许多不匹配的名称。让我们解决一下：

<FORM NAME="myform" ACTION="" METHOD="GET">
<SELECT class="select diff_data" style="WIDTH: 165px" name="CarPick">
<OPTION value="1">Audi</OPTION>
<OPTION value=2>BMW</OPTION>
<OPTION value=3>Mercedes</OPTION>
</SELECT>

<INPUT TYPE="button" NAME="button2" Value="Write" onClick="writeText(this.form)">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
var objDropDownMenu = document.getElementsByName("CarPick")[0];   //It is get elementS - all alements with that name are returned



function writeText (form) {
    objDropDownMenu.options[2].selected = true;  //Here I wonder if 30th entry exists, 2 surelly does
}
</SCRIPT>

单击按钮更改SELECT OPTION下拉数据

2 个答案: