異なるブラウザでselectラベルoption値を取得する互換性の問題

3316 ワード

select-optionラベルを使用する場合.optionの値について質問です.
一、IE部分ブラウザでOptionに値が設定されていない場合、Selectは空文字列を取得する
HTML > 
 
 
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]IE 9/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を選択します.このとき、各ブラウザでポップアップされた結果は、IE 6/7/8:0 IE 9/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よりもフォールトトレランスが優れていることがわかります.
二、selectコレクションで選択した値を取得する方法
 
<form name="form1" action="" method="post">
     <select id="testtt" onchange="check()">
         <option value="office">     </option>
            <option value="office2">      </option>
            <option value="office3">     </option>
        </select>
    </form>
<script language="javascript">
 function check()
 {
 var r=document.getElementById("testtt").value;
   alert(r);
 }
</script>