使用 JavaScript 在 IE9 中获取数据列表选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12394512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get datalist options in IE9 with JavaScript
提问by Timo Huovinen
This code works in all major browsers except Internet Explorer 9. I don't understand what I'm doing wrong, it's probably something simple that I'm missing.
这段代码适用于除 Internet Explorer 9 之外的所有主要浏览器。我不明白我做错了什么，可能是我遗漏了一些简单的东西。
Copy this code (or use this jsFiddle) to see the problem in IE9:
复制此代码（或使用此 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>
I would like it to be as cross browser as possible in the end.
我希望它最终尽可能跨浏览器。
采纳答案by Jordan Gray
IE 9 ignores optionelements that aren't direct children of a selectelement (or an optgroupwithin one). A simple workaround is to wrap your optionelements in a hidden selectelement using conditional comments:
IE 9 会忽略option不是select元素（或元素optgroup内）的直接子元素的元素。一个简单的解决方法是使用条件注释将option元素包装在隐藏select元素中：
<datalist id="languages">
<!--[if IE 9]><select disabled style="display:none"><![endif]-->
<option value="Arabic">
...
<!--[if IE 9]></select><![endif]-->
</datalist>
Here's a jsFiddle demoof this approach.
这是这种方法的jsFiddle 演示。
2017 Update:It's worth noting that as of July 2017 Safari on iOS & Mac still haven't added support for <datalist>elements. OP asked for a solution that works will all major browsers so this probably isn't the best solution to that effect.
2017 年更新：值得注意的是，截至 2017 年 7 月，iOS 和 Mac 上的 Safari 仍未添加对<datalist>元素的支持。OP 要求提供适用于所有主要浏览器的解决方案，因此这可能不是达到该效果的最佳解决方案。
More info here:http://caniuse.com/#search=datalist
更多信息在这里：http : //caniuse.com/#search=datalist
回答by Kremena Lalova
For some reason the solution provided did not work for me. Instead I used jQuery UI's autocomplete method and Modernizr to verify whether the browser supports it.
出于某种原因，提供的解决方案对我不起作用。相反，我使用了 jQuery UI 的自动完成方法和 Modernizr 来验证浏览器是否支持它。
I ended up using this javascript code:
我最终使用了这个 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();
}
For the following HTML:
对于以下 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>
Used the following Microsoft post as a reference: http://msdn.microsoft.com/en-us/magazine/dn133614.aspx
使用以下 Microsoft 帖子作为参考：http: //msdn.microsoft.com/en-us/magazine/dn133614.aspx
回答by Debloper
You need to add a meta element defining the compatibility view of the content to IE8, and also, enable the dummy-element creation line - it's required as well.
您需要添加一个元元素来定义内容对 IE8 的兼容性视图，并且还需要启用虚拟元素创建行 - 这也是必需的。
So, your <head>should now look like this:
所以，你<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>
