在 Internet Explorer 中获取 SELECT 框的值答案

【问题标题】：Getting the value of a SELECT box in Internet Explorer在 Internet Explorer 中获取 SELECT 框的值
【发布时间】：2014-02-11 02:49:27
【问题描述】：

我有一个选择框：

<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。

【问题讨论】：

标签： firefox javascript html internet-explorer

【解决方案1】：

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

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

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

【讨论】：

本身没有错误，我有一个检查值的检查，但该值永远不存在
Greg，@Marco Z 的回答（使用 .text 而不是 .value）在 IE7 上为我工作。也许更新答案，或者解释为什么不？
我通常只使用 jQuery。向元素添加一个类，无论是选择、输入、文本区域还是隐藏字段，然后使用 $('element').val() 检索其值。轻松愉快。

【解决方案2】：

由于您的选项标签没有属性“值”，IE6 和 IE7 将返回一个空字符串。您应该像这样从 Option 对象的“文本”字段中读取值：

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

在 item1 中，您将获得所需的价值，而不会破坏与 Firefox 和 IE 8 的兼容性。

【讨论】：

【解决方案3】：

作为回答 #1 的补充，请注意，因为 .options[n] 时引发异常。因此，您可能需要做一个快速测试：

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

编辑

根据 Tim 的评论，如果您通过 JavaScript 设置 s.selectedIndex 或创建一个空的

【讨论】：

你知道selectedIndex什么时候可以是-1吗？我从没见过。
selectedIndex 可以为 -1 的唯一方法是您已通过 JavaScript 明确将其设置为 -1。
但是，我的投票太仓促了，现在我无法删除它，除非您进行编辑。对不起。
JSREF 声明：“如果未选择任何选项，则 selectedIndex 的值为 -1。”

【解决方案4】：

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

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;
    }
  }

【讨论】：