使用JavaScript在IE9中获取数据列表选项

Get datalist options in IE9 with JavaScript

本文关键字：数据 列表 选项 获取 JavaScript IE9 使用      更新时间：2023-09-26

此代码适用于除Internet Explorer 9之外的所有主要浏览器。我不明白我做错了什么，可能是我错过了一些简单的事情。

复制此代码（或使用此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>

我希望它最终尽可能地跨浏览器。

IE 9忽略不是select元素（或一个元素中的optgroup）的直接子元素的option元素。一个简单的解决方法是使用条件注释将option元素包装在隐藏的select元素中：

<datalist id="languages">
<!--[if IE 9]><select disabled style="display:none"><![endif]-->
    <option value="Arabic">
    ...
<!--[if IE 9]></select><![endif]-->
</datalist>

下面是这种方法的jsFiddle演示。

2017更新：值得注意的是，截至2017年7月，iOS上的Safari&Mac仍然没有添加对<datalist>元素的支持。OP要求提供一个适用于所有主流浏览器的解决方案，因此这可能不是最好的解决方案。

此处提供更多信息：http://caniuse.com/#search=datalist

由于某些原因，提供的解决方案对我不起作用。相反，我使用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

您需要向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>
相关文章：