selectタグと、optionタグ(プルダウン)をcssとjQueryでカスタマイズしていきます。
cssで見た目を、jQueryで選択されている値の変更・取得などまとめました。
もくじ
jQuery関連記事
【jQuery】pdfが存在するか、mimeタイプのバリデーションする
jQuery UIのsortableを使ってリストをドラッグで並び替える
jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する
HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる
bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種
bxSliderの使い方と、オプションでのカスタマイズ方法
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する
jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる
select要素とは?
「select要素」は、よくフォーム内でユーザーに選択肢を選んで貰う場合に使われるHTML要素です。
<SELECT>はセレクトボックスを作成するタグです。 セレクトボックス内の選択肢は<OPTION>タグで指定します。
今回は、下記のHTMLをカスタマイズしていきます。
See the Pen
yLJqVgX by むぅ (@mugenweb) on CodePen.light
HTML
<select name="pref_id" id="pref_id" class="pref_id"> <option value="" hidden>選択</option> <option value="21">岐阜県</option> <option value="22">静岡県</option> <option value="23">愛知県</option> <option value="24" selected>三重県</option> </select>
selectタグの使い方と属性
selectタグは、選択肢の箱を作るイメージです。
箱の中に、optionタグの選択肢を入れるようなイメージで使用します。
name属性
selectタグについている、name属性
はデータを送るときに利用されるデータの名前で使用するので、データ送信の必要がある場合は必須です。
id属性
selectタグについている、id属性
はjQueryで選択値の取得や変更で使用していきます。
class属性
selectタグについている、class属性
はcssでデザインの変更で使用していきます。
selected属性
optionタグのテキスト「三重県」にselected属性がついています。
こうすることで、selected属性がついた選択肢は、ページを開いた時に、最初から選択されている状態になります。
hidden属性
optionタグのテキスト「選択」にhidden属性がついています。
こうすることで、hidden属性がついた選択肢は、選ぶことができなくなります。
選択肢を絞ることで、ユーザーに優しいフォームになります。
cssでselectタグのデザインをカスタマイズする
cssでselectタグのデザインを簡単に変更していきます。
下記のcssで基本的なカスタマイズをしていきます。
css
select{ width: 25%; height: 40px; display: block; margin: 1.5rem auto; padding: 8px 12px; text-indent: 0.01px; border: 1px solid #ddd; color: #828c9a; border-radius: 3px; outline: none; } select option{ background-color: #fff; color: #333; }
cssの:hover・:focusでデザインを変更する
cssの疑似要素の、:hoverと、:focusでselectタグのデザインを変更してみます。上記cssに追記したものが下記です。
See the Pen yLJxBpX by むぅ (@mugenweb)
on CodePen.light
css
select:hover { background-color:#cde2a3; } select:focus { background-color:#a9d1e2; }
appearanceを指定して矢印のデザインを消す
自動的に各ブラウザにおいての、標準的なUIの外観になっているので、それをリセットする必要があります。
例えばiOSのsafariで、フォーム部品のデザインを変更しようとしてもborder-radius: 0;が効かないなどの例があります。
appearanceをnoneに指定することで、selectタグとしての外観をリセットさせることで、矢印が消えるという仕組みです。
デザインの変更をしたい場合は、一度デザインをリセットしてから新しくデザインしなおすという方法で行いましょう。
See the Pen rNLZBQv by むぅ (@mugenweb)
on CodePen.light
css
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
選択されたvalueの値をjQueryで取得する
selectタグが変更された時に、選択されたoptionタグのvalueの値をjQueryで取得してみます。
取得した値がわかりやすいように、結果をHTMLに出力します。
See the Pen RwRYbzP by むぅ (@mugenweb)
on CodePen.light
HTML
<select name="pref_id" id="pref_id" class="pref_id"> <option value="" hidden>選択</option> <option value="21">岐阜県</option> <option value="22">静岡県</option> <option value="23">愛知県</option> <option value="24" selected>三重県</option> </select> <div id="result"></div>
JavaScript
$('#pref_id').change(function() { var result = $('option:selected').val(); $('#result').text(result); });
上記の例では、#pref_id
が変更されたときに、$('option:selected')
で選択されているoptionタグのval()
値を取得するという処理が行われています。
最後に、取得した値を#result
に反映しています。
選択されたoptionタグのテキストをjQueryで取得する
selectタグが変更された時に、選択されたoptionタグのテキストをjQueryで取得してみます。
取得した値がわかりやすいように、結果をHTMLに出力します。
See the Pen eYzLYYj by むぅ (@mugenweb)
on CodePen.light
HTML
<select name="pref_id" id="pref_id" class="pref_id"> <option value="" hidden>選択</option> <option value="21">岐阜県</option> <option value="22">静岡県</option> <option value="23">愛知県</option> <option value="24" selected>三重県</option> </select> <div id="result"></div>
JavaScript
$('#pref_id').change(function() { var result = $('option:selected').text(); $('#result').text(result); });
上記の例では、#pref_id
が変更されたときに、$('option:selected')
で選択されているoptionタグのval()
値を取得するという処理が行われています。
最後に、取得した値を#result
に反映しています。
jQueryで選択(selected)状態にする1
jQueryから、selectタグの選択項目を制御してみたいので、ラジオボタン群とselectタグを使ったサンプルを作成してみました。
See the Pen
OJXoPNE by むぅ (@mugenweb) on CodePen.light
HTML
<div id="result"> <input type="radio" value="岐阜県" id="p1" name="choose"> <label for="p1">岐阜県</label> <input type="radio" value="静岡県" id="p2" name="choose"> <label for="p2">静岡県</label> <input type="radio" value="愛知県" id="p3" name="choose"> <label for="p3">愛知県</label> <input type="radio" value="三重県" id="p4" name="choose"> <label for="p4">三重県</label> </div> <select id="pref_id"> <option value="" hidden>選択</option> <option value="岐阜県">岐阜県</option> <option value="静岡県">静岡県</option> <option value="愛知県">愛知県</option> <option value="三重県">三重県</option> </select>
JavaScript
$('input[name="choose"]').change(function() { var result = $(this).val(); $('#pref_id').val(result); });
上記の例では、radioボタンなので、input[name="choose"]
が変更されたときに、まずresult
に選択された値を格納します。
その後、#pref_id
内からvalueが合致したものが選択され、jQueryからselectタグを制御できます。
お互いのvalueが一緒なので簡単ですね。
radioボタンからしか制御できないのは気持ち悪いので、selectタグからradioボタンを制御できるものも作りました。
JavaScript
$('input[name="choose"]').change(function() { var result = $(this).val(); $('#pref_id').val(result); }); $('#pref_id').change(function() { var result = $('#pref_id option:selected').val(); $('input[name="choose"]').each(function(){ if($(this).val() == result){ $(this).prop('checked', true); } }); });
jQueryで選択(selected)状態にする2
上記のサンプルはvalueの値とテキストが同じものでしたが、違うもの下記仕様のselectタグを2つ使ったサンプルを作成してみました。
1. 「選択値によって変化する」selectタグのvalueの値とテキストが異なる。
2. 「選択する側」を変更したときに選ばれた値を取得。
3. 「選択値によって変化する」のvalueの中から、値が一致するものを選択状態にする。
See the Pen
abZabBr by むぅ (@mugenweb) on CodePen.light
HTML
<p>選択する側</p> <select id="choose"> <option value="" hidden>選択</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> </select> <p>選択値によって変化する</p> <select id="pref_id" disabled> <option value="" hidden>選択</option> <option value="21">岐阜県</option> <option value="22">静岡県</option> <option value="23">愛知県</option> <option value="24">三重県</option> </select>
JavaScript
$('#choose').change(function() { var result = $('#choose option:selected').val(); $('#pref_id option').each(function () { if ($(this).val() == result) { $(this).prop('selected', true); } }) });
上記の例では、#choose
が変更されたときに、まずresult
に選択された値を格納します。
その後、#pref_id
内の全てのoptionタグに対して、合致した場合、$(this).prop('selected', true);
で、selected状態にしています。
コメント