2006年8月アーカイブ

セレクトボックスの中身を階層化したいという要求があったので、単に子に当たるものは全角スペース１つのインデントをつけていた。

こんな感じ↓

<select name="food">
<option label="野菜" value="tomato">野菜</option>
<option label="トマト" value="tomato">　トマト</option>
<option label="なす" value="nasu">　なす</option>
<option label="にんじん" value="ninjin">　にんじん</option>
<option label="さつまいも" value="satuma">　さつまいも</option>
<option label="とうもろこし" value="morokosi">　とうもろこし</option>
</select>

でもこういうのがあったんだ。

<OPTGROUP>－HTMLタグリファレンス
http://www.htmq.com/html/optgroup.shtml

こんな風になるみたい↓

<select name="food">
<optgroup label="野菜">
<option label="トマト" value="tomato">トマト</option>
<option label="なす" value="nasu">なす</option>
<option label="にんじん" value="ninjin">にんじん</option>
<option label="さつまいも" value="satuma">さつまいも</option>
<option label="とうもろこし" value="morokosi">とうもろこし</option>
</optgroup>
<optgroup label="果物">
<option label="さくらんぼ" value="sakura">さくらんぼ</option>
<option label="メロン" value="melon">メロン</option>
<option label="ぶどう" value="budou">ぶどう</option>
<option label="りんご" value="ringo">りんご</option>
<option label="みかん" value="mikan">みかん</option>
</optgroup>
</select>

ＳＥＯ対策にもいいらしい？ので、使ってみたかったが親自体（上の例で行くと「野菜・果物」）も選択できるようにしたかったので採用できず。