使用 JavaScript 在 IE9 中获取数据列表选项
Posted
技术标签:
【中文标题】使用 JavaScript 在 IE9 中获取数据列表选项【英文标题】：Get datalist options in IE9 with JavaScript 【发布时间】：2012-09-05 20:20:19 【问题描述】：此代码适用于除 Internet Explorer 9 之外的所有主要浏览器。我不明白我做错了什么，可能是我遗漏了一些简单的东西。
复制此代码（或use this jsFiddle）以查看IE9中的问题：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Datalist fetching in IE9</title>
<script type="text/javascript">
//document.createElement('datalist');//this seems to fix it for IE6, but not for IE9
window.onload = function()
alert(document.getElementById('languages').getElementsByTagName('option').length);//should alert 42
;
</script>
</head>
<body>
<form method="post">
<input name="language" type="text" value="English" list="languages" />
<datalist id="languages">
<option value="Arabic" />
<option value="Bengali" />
<option value="Bulgarian" />
<option value="Catalan" />
<option value="Chinese" />
<option value="Croatian" />
<option value="Czech" />
<option value="Danish" />
<option value="Dutch" />
<option value="English" />
<option value="Filipino" />
<option value="Finnish" />
<option value="French" />
<option value="German" />
<option value="Greek" />
<option value="Gujarati" />
<option value="Hebrew" />
<option value="Hindi" />
<option value="Hungarian" />
<option value="Indonesian" />
<option value="Italian" />
<option value="Japanese" />
<option value="Kannada" />
<option value="Korean" />
<option value="Latvian" />
<option value="Lithuanian" />
<option value="Malay" />
<option value="Malayalam" />
<option value="Marathi" />
<option value="Norwegian" />
<option value="Oriya" />
<option value="Persian" />
<option value="Polish" />
<option value="Portuguese" />
<option value="Romanian" />
<option value="Russian" />
<option value="Serbian" />
<option value="Slovak" />
<option value="Slovenian" />
<option value="Spanish" />
<option value="Swedish" />
<option value="Tamil" />
</datalist>
</form>
</body>
</html>
我希望它最终尽可能跨浏览器。
【问题讨论】：
【参考方案1】：IE 9 会忽略不是select 元素（或其中一个optgroup）的直接子元素的option 元素。一个简单的解决方法是使用条件 cmets 将 option 元素包装在隐藏的 select 元素中：
<datalist id="languages">
<!--[if IE 9]><select disabled style="display:none"><![endif]-->
<option value="Arabic">
...
<!--[if IE 9]></select><![endif]-->
</datalist>
这是这种方法的jsFiddle demo。
2017 年更新：值得注意的是，截至 2017 年 7 月，ios 和 Mac 上的 Safari 仍未添加对 <datalist> 元素的支持。 OP 要求一种适用于所有主要浏览器的解决方案，因此这可能不是实现该效果的最佳解决方案。
更多信息在这里： http://caniuse.com/#search=datalist
【讨论】：
它的好处是它可以在不将 IE 9 用户降级到更旧、更粗糙的渲染引擎的情况下工作。 8 到 9 之间有一些重大改进；仅仅因为这样的小错误而失去所有这些是不值得的。 :) 由于某种原因，这段代码对我不起作用。即使是 jsFiddle 演示也不能在 IE9 中运行 @KremenaLalova 噢，这太糟糕了——不过，感谢您花时间报告它！您介意说一下您是如何测试它的，以便我可以尝试重现该问题吗？您是直接使用 IE 9 还是类似 IETester/在更高版本中更改文档模式？您是直接访问 jsFiddle，还是仅访问 the results frame？ 直接在 IE9 上。我首先打开 jsFiddle 并尝试在那里对其进行测试，但它没有用，然后尝试将代码添加到我的应用程序中，但仍然没有运气......最后做了更多的研究，这就是最终对我有用的（将其发布为答案）。我的IE版本是：9.0.8112.16421。 @JordanGray，可能就是这样。我能够看到 DOM 中的元素，但它们仍然没有显示在 IE 的数据列表中。感谢您的帮助，因为您的示例让我的研究向前迈进了一步。【参考方案2】：由于某种原因，提供的解决方案对我不起作用。相反，我使用了 jQuery UI 的自动完成方法和 Modernizr 来验证浏览器是否支持它。
我最终使用了这个 javascript 代码：
var datalist, listAttribute, options = [];
if(!Modernizr.input.list)
$('input[type="text"][list]').each(function()
listAttribute = $(this).attr('list');
datalist = $('#' + listAttribute);
if (datalist.length > 0)
options = [];
datalist.find('option').each(function()
options.push( label: this.innerHTML, value: this.value );
);
$(this).autocomplete(
source: options
);
);
$('datalist').remove();
对于以下 HTML：
<div id="LocationSearch" class="col-xs-4 col-md-3">
<input type="text" name="locations" list="locations">
<datalist id="locations">
<select name="locations">
<option value="CD455">CD455</option>
<option value="CD455">CD455</option>
<option value="CD455">CD455</option>
</select>
</datalist>
</div>
使用以下 Microsoft 帖子作为参考：http://msdn.microsoft.com/en-us/magazine/dn133614.aspx
【讨论】：
【参考方案3】：您需要向 IE8 添加一个定义内容兼容性视图的元元素，并启用虚拟元素创建行 - 这也是必需的。
所以，您的 <head> 现在应该如下所示：
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8"> <!-- IMPORTANT -->
<title>Datalist fetching in IE9</title>
<script type="text/javascript">
document.createElement('datalist'); // IMPORTANT AS WELL
window.onload = function()
alert(document.getElementById('languages').getElementsByTagName('option').length);//should alert 42
;
</script>
【讨论】：
有效！谢谢！荒谬的是，每个 Internet Explorer 版本都有自己的修复和黑客列表。 永久地将所有未来版本的 IE 绑定到过时的 IE 8 渲染模式是一个非常生硬的解决方案；鉴于 IE 9 及更高版本带来的重大改进，我一般不推荐它。以上是关于使用 JavaScript 在 IE9 中获取数据列表选项的主要内容，如果未能解决你的问题，请参考以下文章
在 IE9 中使用 JavaScript 创建 GUID？ [复制]
JavaScript基础 window.innerWidth 获取网页的宽度与高度 IE9,火狐可以用
无法在 Firefox 和 IE9 中获取数据，但在 Chrome 和 Safari 中运行良好