ラック
Home > ブログ > 記事 > 2015年1月 > セレクトボックスのselected属性について

セレクトボックスのselected属性について

カテゴリ: ホームページ, プログラム

セレクトボックスを弄ってて、前のページからgetリクエストで送った値に対応して、jsで予めselectedを付ける、というスクリプトを書いていた時にちょっと気付いたのでメモ。

	
<select name="select_elem">
	<option value="-1" selected="selected">要素を選択してください</option>
	<option value="-1">▼カテゴリ1</option>
	<option value="11">要素1</option>
	<option value="12">要素2</option>
	<option value="-1">▼カテゴリ2</option>
	<option value="21">要素3</option>
	<option value="22">要素4</option>
	<option value="23">要素5</option>
	<option value="-1">▼カテゴリ3</option>
	<option value="31">要素6</option>
</select>
	

こんなセレクトボックスを用意して、「?key=xx(2桁数字)」が付いたURLでアクセスされたら、xxの値に対応した要素をselectedにする、と。
もし対応する値がなかったり、そもそもgetリクエストがない(URL直打ちでアクセスしたりした場合)は「要素を選択してください」がselectedになっている…はずでした。

確かにそれで動くのですが、ページをリロードするとなぜか「カテゴリ3」がselectedになっているという怪奇現象。

	
<select name="select_elem">
	<option value="-1" selected="selected">要素を選択してください</option>
	<option value="-1">▼カテゴリ1</option>
	<option value="11">要素1</option>
	<option value="12">要素2</option>
	<option value="-1">▼カテゴリ2</option>
	<option value="21">要素3</option>
	<option value="22">要素4</option>
	<option value="23">要素5</option>
	<option value="-1">▼カテゴリ3</option>
	<option value="-1">要素6</option>
</select>
	

こんな感じで要素6のvalueを-1に変えると要素6がselectedになる。他の要素のvalueを変えるとカテゴリ3になる。

…もしかしてこれ、selected=”selected”になっているoption(=「要素を選択してください」)とvalueが同じものに対して、selectedの判定がどんどん渡されて、valueの値が同じになっているoptionの中で一番最後のoption(=「カテゴリ3」)に行くのか?

	
<select name="select_elem">
	<option value="-1" selected="selected">要素を選択してください</option>
	<option value="-2">▼カテゴリ1</option>
	<option value="11">要素1</option>
	<option value="12">要素2</option>
	<option value="-3">▼カテゴリ2</option>
	<option value="21">要素3</option>
	<option value="22">要素4</option>
	<option value="23">要素5</option>
	<option value="-4">▼カテゴリ3</option>
	<option value="31">要素6</option>
</select>
	

試しにvalueの値を全部違うものに変えたら、この怪奇現象は収まった。どうやら、そういうことらしい(詳しく検証はしていないので真偽は不明)。

タグ: html

 



関連する記事一覧