ミギムキ

[jQuery] セレクトボックスのデザインを自由に変えたい

サンプルコード

html

<div class="select_box"> <input type="hidden" name="gosanke"></input> <div class="select_box_value"></div> <ul> <li data-value="フシギダネ">フシギダネ</li> <li data-value="ヒトカゲ">ヒトカゲ</li> <li data-value="ゼニガメ">ゼニガメ</li> </ul> </div>
  • リストのliタグがセレクトボックスのアイテムになります。「data-value」属性に指定した値が、フォーム送信時に渡されるデータになります
  • 「select_box_value」クラスには、現在選択中のアイテムが表示されます
スポンサー広告

CSS

.select_box { position: relative; width: 200px; border-top: 1px solid #3388dd; cursor: pointer; } .select_box > ul { display: none; position: absolute; top: 100%; left: 0px; padding: 0px; margin: 0px; width: 100%; list-style: none; } .select_box > ul.js_open { display: block; } .select_box_value, .select_box > ul > li { padding: 0.5em 1em; margin: 0px; border: 1px solid #3388dd; border-top: none; text-align: center; }
  • 通常時、ulタグは非表示となります。ulタグに「js_open」クラスが付与されたときに表示することで、セレクトボックスを開いたような挙動になります

jQuery

jQuery(function($) { const selectBoxes = $('.select_box'); const selectBoxItems = $('.select_box li'); selectBoxes.find('.select_box_value').each(function() { const firstListItem = $(this).next('ul').find('li:first-child'); $(this).prev('input').val(firstListItem.data('value')); $(this).text(firstListItem.text()); }); selectBoxes.click(function() { const selectBoxList = $(this).find('ul'); if(selectBoxList.hasClass('js_open')) { selectBoxList.removeClass('js_open'); } else { selectBoxList.addClass('js_open'); } }); selectBoxItems.click(function() { const selectBox = $(this).closest('.select_box'); selectBox.find('input').val($(this).data('value')); selectBox.find('.select_box_value').text($(this).text()); }); });
  • jQueryで以下の処理を行い、セレクトボックスらしい挙動を実現します
    • セレクトボックスもどきの現在値を、先頭の選択肢の値で初期化する
    • セレクトボックスもどきがクリックされたときに、リストに「js_open」クラスを付け外しする
    • セレクトボックスもどきの選択肢がクリックされたときに、現在値を更新する
  • 見かけ上の現在値は、「select_box_value」クラスに、liタグで囲まれたテキストを設定します
  • フォーム送信用の内部値は、inputタグのvalueに、liタグの「data-value」属性の内容を設定します
スポンサー広告