使用JavaScript获取IE9中的datalist选项 | 使用JavaScript获取IE9中的datalist选项

本文介绍了使用JavaScript获取IE9中的datalist选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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.

复制此代码（或）查看IE9中的问题：

Copy this code (or use this jsFiddle) to see the problem in 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.

推荐答案

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

IE 9 ignores option elements that aren't direct children of a select element (or an optgroup within one). A simple workaround is to wrap your option elements in a hidden select element using conditional comments:

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

这里是。

这篇关于使用JavaScript获取IE9中的datalist选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！