メールフォームでセレクトボックスの内容が長すぎてiPhoneで省略されてしまうのを防ぐ
こんばんは、福田です。
メールフォームのセレクトボックスで下の画像のように選択肢が省略されて表示されている事ってありませんか？
時々省略されていてどれが選びたい値なのか分からない時があります 🙁
そんな時、約に立つのが<optgroup>タグです。
<option>全体を<optgroup>で囲ってやると、iPhoneでも省略されずに表示してくれます！
|
1 2 3 4 5 6 7 |
<select> <optgroup label=""> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> </optgroup> </select> |
もしくは<option>の最後に<optgroup>を入れてやる。
|
1 2 3 4 5 6 |
<select> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> <optgroup label=""></optgroup> </select> |
jQueryで複数のメールフォームを一括で対応させたい場合
<option>全体を<optgroup>で囲うパターン
|
1 2 3 |
$(function() { $('select').wrapInner('<optgroup label=""></optgroup>'); }); |
<option>の最後に<optgroup>を入れるパターン
|
1 2 3 |
$(function() { $('select').append('<optgroup label=""></optgroup>'); }); |
これで問題なくiPhoneでも省略されずに表示されるはずです 😆
ではでは、夏休みまであと少し頑張りましょ～！