IE 6/7/8のOption要素にvalueが設定されていない場合、Selectは空の文字列を取得します
再生コードは以下の通りです.
changeイベントがトリガーされると、各ブラウザでのテスト結果は次のとおりです.
IE 6/7/8:空の文字列をポップアップ
IE 9/Firefox/Safari/Chrome/Opera:対応するoption要素のinnerText値をポップアップします.
明らかに、IE 9/Firefox/Safari/Chrome/Operaの実現には一定の道理がある.すなわち、optionのvalueとoptionのinnerTextが同じである場合、そのvalueが書かれていないことを省略することができる.これはもっと簡潔です.残念ながらIE 6/7/8ではサポートされていません.すべてのブラウザとの互換性を保証するために、optionを書くときはvalueプロパティを少なくしないでください.
上のhtmlコードを少し修正します
最初のoptionにvalueプロパティを追加しました.この場合、テスト手順は次のとおりです.
1,twoを選択
2、oneを選択
2回のポップアップの結果は次のとおりです.
IE 6/7/8:[空文字列,1]
IE9/Firefox/Safari/Chrome/Opera : [two,1]
結果として,各ブラウザの実装は以下のようになる.
IE 6/7/8でoptionにvalue値がない場合、空の文字列が返されます.
IE 9/Firefox/Safari/Chrome/Operaではoptionのvalue値を先に取り、value属性がない場合はoptionのinnerText値を取ります.
もう少しコードを直して
前のステップに比べて、2番目のoptionのtwoの両側にスペースが追加されました.今回はalertでvalueの長さを出します.twoを選択します.このとき、各ブラウザでポップアップされた結果は次のとおりです.
IE6/7/8 : 0
IE9/Firefox/Safari/Chrome/Opera : 3
IE 6/7/8ではvalue属性のないoptionに対して空の文字列が返され、lengthは自然に0である.今回のテストで注目したのは主にIE 9/Firefox/Safari/Chrome/Operaなどの現代ブラウザです.それらの中で返されるのはすべて3ですが、5ではありません.これらのブラウザの内部でtwoの両側の空白文字が削除されていることがわかります(trim).
前回のテストでは、IE 9/Firefox/Safari/Chrome/Operaでoptionを先に取るvalueについて説明しましたが、valueプロパティにはoptionのinnerText値がありません.valueプロパティが設定されていないoptionでは、innerTextをvalueとして返すように努力し、両側の空白文字を自動的に削除します.
以上、optionを返すinnerTextについて言及してきましたが、innerHTMLではありません.コードを変更
2番目のoptionにはvalueプロパティがありません.ここではspan要素です.このときtwoを選択します.IE 9/Firefox/Safari/Chrome/Operaでは、「twotwo
これらの現代ブラウザは、optionのvalueを書くのを忘れた場合、できるだけ正しい(クライアントプログラマーが望んでいる)結果valueを返すことができ、IE 6/7/8よりもフォールトトレランスが優れていることがわかります.
<!DOCTYPE HTML>
<html>
<head>
<title>IE6/7/8 Option value Select </title>
</head>
<body>
<select onchange="alert(this.value)">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</body>
</html>changeイベントがトリガーされると、各ブラウザでのテスト結果は次のとおりです.
IE 6/7/8:空の文字列をポップアップ
IE 9/Firefox/Safari/Chrome/Opera:対応するoption要素のinnerText値をポップアップします.
明らかに、IE 9/Firefox/Safari/Chrome/Operaの実現には一定の道理がある.すなわち、optionのvalueとoptionのinnerTextが同じである場合、そのvalueが書かれていないことを省略することができる.これはもっと簡潔です.残念ながらIE 6/7/8ではサポートされていません.すべてのブラウザとの互換性を保証するために、optionを書くときはvalueプロパティを少なくしないでください.
上のhtmlコードを少し修正します
<select onchange="alert(this.value)">
<option value="1">one</option>
<option>two</option>
<option>three</option>
</select>
最初のoptionにvalueプロパティを追加しました.この場合、テスト手順は次のとおりです.
1,twoを選択
2、oneを選択
2回のポップアップの結果は次のとおりです.
IE 6/7/8:[空文字列,1]
IE9/Firefox/Safari/Chrome/Opera : [two,1]
結果として,各ブラウザの実装は以下のようになる.
IE 6/7/8でoptionにvalue値がない場合、空の文字列が返されます.
IE 9/Firefox/Safari/Chrome/Operaではoptionのvalue値を先に取り、value属性がない場合はoptionのinnerText値を取ります.
もう少しコードを直して
<select onchange="alert(this.value.length)">
<option value="1">one</option>
<option> two </option>
<option>three</option>
</select>前のステップに比べて、2番目のoptionのtwoの両側にスペースが追加されました.今回はalertでvalueの長さを出します.twoを選択します.このとき、各ブラウザでポップアップされた結果は次のとおりです.
IE6/7/8 : 0
IE9/Firefox/Safari/Chrome/Opera : 3
IE 6/7/8ではvalue属性のないoptionに対して空の文字列が返され、lengthは自然に0である.今回のテストで注目したのは主にIE 9/Firefox/Safari/Chrome/Operaなどの現代ブラウザです.それらの中で返されるのはすべて3ですが、5ではありません.これらのブラウザの内部でtwoの両側の空白文字が削除されていることがわかります(trim).
前回のテストでは、IE 9/Firefox/Safari/Chrome/Operaでoptionを先に取るvalueについて説明しましたが、valueプロパティにはoptionのinnerText値がありません.valueプロパティが設定されていないoptionでは、innerTextをvalueとして返すように努力し、両側の空白文字を自動的に削除します.
以上、optionを返すinnerTextについて言及してきましたが、innerHTMLではありません.コードを変更
<select onchange="alert(this.value)">
<option value="1">one</option>
<option><span>two</span></option>
<option>three</option>
</select>2番目のoptionにはvalueプロパティがありません.ここではspan要素です.このときtwoを選択します.IE 9/Firefox/Safari/Chrome/Operaでは、「twotwo
これらの現代ブラウザは、optionのvalueを書くのを忘れた場合、できるだけ正しい(クライアントプログラマーが望んでいる)結果valueを返すことができ、IE 6/7/8よりもフォールトトレランスが優れていることがわかります.