9

このコードは、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>

最終的にはできるだけクロスブラウザにしたいです。

4

3 に答える 3

9

IE 9 は、要素の直接の子(または要素内)optionではない要素を無視します。簡単な回避策は、条件付きコメントを使用して非表示の要素で要素をラップすることです。selectoptgroupoptionselect

<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 と Mac の Safari はまだ<datalist>要素のサポートを追加していないことに注意してください。OPはすべての主要なブラウザで機能するソリューションを求めたので、これはおそらくその効果に対する最良のソリューションではありません.

詳細はこちら: http://caniuse.com/#search=datalist

于 2013-03-12T18:03:20.150 に答える
3

何らかの理由で、提供されたソリューションがうまくいきませんでした。代わりに、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>

次のマイクロソフトの投稿を参照として使用しました: http://msdn.microsoft.com/en-us/magazine/dn133614.aspx

于 2014-06-12T14:11:54.730 に答える
-1

コンテンツの互換性ビューを定義するメタ要素を 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>
于 2012-09-12T19:47:16.050 に答える