次のように
IE6/7/8 の Option 要素は空の文字列 を取得します。 ;
変更イベントがトリガーされると、各ブラウザーでのテスト結果は次のようになります:
IE6/7/8
: 空の文字列がポップアップします
IE9/Firefox/ Safari/Chrome/Opera
: 対応するオプション要素の innerText 値をポップアップします。
IE9/Firefox/Safari/Chrome/Opera の実装は明らかに理にかなっています。つまり、option の値が option の innerText と同じ場合、その値は省略でき、書き込めません。これはより簡潔です。残念ながら、IE6/7/8 はこの方法での書き込みをサポートしていません。すべてのブラウザとの互換性を確保するために、オプションを記述するときに value 属性を省略しないようにしてください。
上記の HTML コードを少し変更します
コードをコピーします
コードは次のとおりです:
🎜>
最初のオプションに value 属性を追加します。この時点でのテスト手順は次のとおりです
1、2 つ選択
2、1 つ選択
、2 回表示される結果は次のとおりです:
IE6/7 /8
: [空文字 String, 1]
IE9/Firefox/Safari/Chrome/Opera
: [two,1]
結果から言えば、各ブラウザの実装はおおよそ次のとおりであることがわかります。
IE6/7/8 では、オプションに値がない場合、空の文字列が返されます。
IE9/Firefox/Safari/Chrome/Opera では、value 属性がない場合は、option の値が最初に取得されます。
コードを再度変更します
コードをコピーします
コードは次のとおりです:
前のステップと比較して、2 番目のオプションでは 2 つの文字の両側にスペースが追加されます。今回は値の長さを警告します。 2 つ選択してください。このとき、各ブラウザで次の結果が表示されます:
IE6/7/8
: 0
IE9/Firefox/Safari/Chrome/Opera
: 3
IE6/7/8 では、value 属性のないオプションに対して空の文字列が返され、その長さは当然 0 になります。このテストは、IE9/Firefox/Safari/Chrome/Opera などの最新のブラウザに焦点を当てています。それらはすべて 3 を返しますが、5 は返しません。これらのブラウザでは、両側の空白文字がトリミングされていることがわかります。
前のテストでは、IE9/Firefox/Safari/Chrome/Opera では、option の値が最初に取得され、value 属性は option の innerText 値を取得しないと述べました。 value 属性が設定されていないオプションの場合、innerText を値として返し、両側の空白文字も自動的に削除するよう努めます。
オプションの innerText が返されると上で述べましたが、innerHTML ではありません。次に、コードを変更します
コードをコピーします
コードは次のとおりです:
two three2 番目のオプションには value 属性がなく、内部はspan要素です。このとき、2つ選んでください。 IE9/Firefox/Safari/Chrome/Opera で表示されるのは、「two」ではなく、依然として「two」です。長さを警告すると、「two」の長さである 16 ではなく、まだ 3 であることがわかります。
オプション値を書き忘れた場合、これらの最新のブラウザは正しい結果値 (クライアント プログラマが望むもの) を返そうとし、フォールト トレランスが IE6/7/8 より優れていることがわかります。 。
関連:
さまざまなブラウザーでのオプション要素のパフォーマンスの違い