使用JavaScript获取IE9中的数据列表选项_Javascript_Html_Cross Browser_Internet Explorer 9_Html Datalist

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

javascript html

使用JavaScript获取IE9中的数据列表选项,javascript,html,cross-browser,internet-explorer-9,html-datalist,Javascript,Html,Cross Browser,Internet Explorer 9,Html Datalist,此代码适用于除Internet Explorer 9之外的所有主要浏览器。我不明白我做错了什么，可能是我遗漏了一些简单的东西复制此代码（或）以查看IE9中的问题： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Datalist f

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

复制此代码（或）以查看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>


IE9中的数据列表获取
//document.createElement（'datalist'）//这似乎可以解决IE6的问题，但不能解决IE9的问题
window.onload=函数（）{
警报（document.getElementById（'languages'）.getElementsByTagName（'option'）.length）；//应发出警报42
};

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

您需要向IE8添加一个定义内容兼容性视图的元元素，并且启用虚拟元素创建行-这也是必需的

因此，您的

现在应该如下所示：

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


IE9中的数据列表获取
document.createElement（'datalist'）；//也很重要
window.onload=函数（）{
警报（document.getElementById（'languages'）.getElementsByTagName（'option'）.length）；//应发出警报42
};
IE 9忽略选项
元素，这些元素不是选择
元素（或一个选项组
）的直接子元素。一个简单的解决方法是使用条件注释将选项
元素包装在隐藏的选择
元素中：
<datalist id="languages">
<!--[if IE 9]><select disabled style="display:none"><![endif]-->
    <option value="Arabic">
    ...
<!--[if IE 9]></select><![endif]-->
</datalist>


...

下面是这种方法的一个例子
2017更新：值得注意的是，截至2017年7月，iOS&Mac上的Safari仍然没有添加对
元素的支持。OP要求提供一个可以在所有主要浏览器上运行的解决方案，因此这可能不是达到这一效果的最佳解决方案
此处的更多信息：
由于某些原因，提供的解决方案对我不起作用。相反，我使用jQueryUI的自动完成方法和Modernizer来验证浏览器是否支持它
我最终使用了以下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>


CD455
CD455
CD455

使用以下Microsoft post作为参考：
它可以工作！非常感谢。可笑的是，每一个IE版本都有自己的修复和黑客列表。永久性地将IE的所有未来版本切换到过时的IE8渲染模式是一个非常直截了当的解决方案；考虑到IE9和更高版本带来的显著改进，我一般不推荐它。它的好处是它不会将IE9用户降级到更老、更粗糙的渲染引擎。8到9之间有一些重大改进；仅仅因为像这样的一个小错误，就失去所有这些是不值得的。：）由于某种原因，这个代码对我不起作用。即使是JSFIDLE演示也无法在中工作IE9@KremenaLalova噢，那太糟糕了，不过还是要感谢你花时间来报告！你介不介意告诉我你是如何测试它的，这样我就可以试着重现这个问题？您是否直接使用IE9或类似IETester/在更高版本中更改文档模式？你是直接去JSFIDLE，还是直接去IE9。我首先打开了JSFIDLE并尝试在那里进行测试，但没有成功，然后尝试将代码添加到我的应用程序中，但仍然没有成功。。。最后，我做了更多的研究，这就是最终对我有用的东西（作为答案发布）。我的IE版本是：9.0.8112.16421。@JordanGray，可能就是这样。我能够看到DOM中的元素，但它们仍然没有显示在IE中的数据列表上。感谢您的帮助，因为您的示例使我的研究向前迈进了一步。