Question

我有一个选择框：

<select id="item1" name="Item 1">
  <option> </option>
  <option> Camera </option>
  <option> Microphone </option>
  <option> Tripod </option>
</select>

我有这个JavaScript：

var item1= document.getElementById("item1").value;

item1始终显示为空，从不选择该选项。但是，这适用于firefox。

Answer 1

使用item.value适用于除非常旧的浏览器之外的所有浏览器（Netscape 4任何人？）。它在这种情况下不起作用的原因是因为选项中没有值属性。您应该为每个属性声明值。您当前拥有的只是“text”属性，通常在没有声明值时默认为value。或者，你可以在窗口onload事件中推送一些代码，使每个选项的“值”与“text”相同。

第三种方法，你可以使用下面的代码，这是老式的方式：

var s = document.getElementById('item1');
var item1 = s.options[s.selectedIndex].value;

Answer 2

由于你的选项标签没有属性“value”，IE6和IE7会返回一个空字符串。您应该从Option对象的“text”字段中读取值，如下所示：

var item1 = s.options[s.selectedIndex].text;

在第1项中，您将拥有所需的价值而不会破坏与Firefox和IE 8的兼容性。

Answer 3

作为回答＃1的附录，请注意＆lt; select＆gt; .selectedIndex可能会为-1，这会在传递给＆lt; select＆gt; .options [n]时引发异常。因此，您可能希望进行快速测试：

var s = document.getElementById('item1');
var item = (-1 != s.selectedIndex)? 
               s.options[s.selectedIndex] : null;

修改

Per Tim的评论，如果您通过JavaScript设置s或者创建一个空的＆lt; select＆gt;，则s.selectedIndex可以为-1。框。

Answer 4

从名为 layerDetails.styleColumn 的SELECT框中获取可变 columnName 的代码（SELECT标记具有相同的名称和ID），适用于所有浏览器... < / p>

var columnName = document.getElementsByName('layerDetails.styleColumn')[0].value;
if ( columnName == null || columnName == '' )
  {
  columnName = document.getElementById('layerDetails.styleColumn').value;
  }

if ( columnName == null || columnName == '' )
  {
  var select = document.getElementById('layerDetails.styleColumn');
  columnName= select.options[select.selectedIndex].value;
  if ( columnName == null || columnName == '' )
    {
    columnName= select.options[select.selectedIndex].text;
    }
  }

获取Internet Explorer中SELECT框的值

4 个答案: