その筋ではとても既知っぽい挙動テストのその2。こんなエントリーばっかりですみません。仕事がまぢきついんで、今はこういうネタしか持ち合わせてないんですよ。

このプルダウンメニューを表示させてるHTMLは以下の通り。

<form>
<div>
<select id="test_select_01" onChange="javascript:alert(this.value)">
    <option disabled selected>-- どれか選んでね --</option>
    <option>選択肢 1</option>
    <option>選択肢 2</option>
    <option>選択肢 3</option>
</select>
</div>
</form>

プルダウンメニューの選択肢を変えた際にアラートで value の値を表示するって指定。

option要素ってvalue属性が指定されていない場合はoption要素の内容をvalueの値として扱うんじゃなかったっけ?

要は「選択肢 n」（nは選択したoptionの数字）がアラートで表示されなきゃいけないってことなんだけど、IE7はしっかり期待を裏切ってくれます。謎。更に言うとIE7ではoption要素内のdisabled属性（選択不可）が機能してない気がする。

ちなみに、さすがにこれだとIE7でも大丈夫（disabled属性が機能してないのは相変わらずですが）。

<form>
<div>
<select id="test_select_02" onChange="javascript:alert(this.value)">
    <option disabled selected>-- どれか選んでね --</option>
    <option value="選択肢 1" label="1">選択肢 1</option>
    <option value="選択肢 2">選択肢 2</option>
    <option value="選択肢 3">選択肢 3</option>
</select>
</div>
</form>

私の中で「これはひどい」認定してる仕事（今やってる仕事）で扱ってるWebページを触ってて気づいたんだけど、こういうフォーム回りの挙動の違いってWebアプリを作る際に困るなぁ。

投稿時刻: 12:45 | カテゴリ: /web/html | 固定リンク