使用JavaScript在IE9中获取datalist选项

Question

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. 我希望它最终成为跨浏览器。

Answer 1

IE 9 ignores option elements that aren't direct children of a select element (or an optgroup within one). IE 9忽略的option元素不是select元素的直接子元素（或者是一个中的optgroup ）。 A simple workaround is to wrap your option elements in a hidden select element using conditional comments: 一个简单的解决方法是使用条件注释将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 demo of 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. 2017年更新：值得注意的是，截至2017年7月，iOS和Mac上的Safari仍然没有添加对<datalist>元素的支持。 OP asked for a solution that works will all major browsers so this probably isn't the best solution to that effect. OP要求提供适用于所有主流浏览器的解决方案，因此这可能不是解决此问题的最佳解决方案。

More info here: http://caniuse.com/#search=datalist 更多信息： http ： //caniuse.com/#search=datalist

Answer 2

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

Answer 3

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>

使用JavaScript在IE9中获取datalist选项

问题描述

3 个解决方案

解决方案1
9 已采纳 2013-03-12 18:03:20

解决方案2
3 2014-06-12 14:11:54

解决方案3
-1 2012-09-12 19:47:16

使用JavaScript在IE9中获取datalist选项

问题描述

3 个解决方案

解决方案1 9 已采纳 2013-03-12 18:03:20

解决方案2 3 2014-06-12 14:11:54

解决方案3 -1 2012-09-12 19:47:16

解决方案1
9 已采纳 2013-03-12 18:03:20

解决方案2
3 2014-06-12 14:11:54

解决方案3
-1 2012-09-12 19:47:16