フォーム select を装飾する前準備

JavaScript

fujihara

2014.11.14

どうもfujiharaです。
ついにこの季節がやってまいりました。3月に社内のロッカーに置きっぱなしにしていたダウンを持って帰る日が！
ってことで無駄話はさておき本日はセレクトボックスを装飾する前準備を紹介したいと思います。

概要

本日は select を装飾する前準備を紹介します。
なぜ前準備？かと申しますと私が出来るのは <select> を <ul>として
見せるまでの js 処理までだからです。(汗)

実装

では早速実装に入っていきます。

まずはHTMLからです。


<div class="wrapper">
<select name="test">
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
<option value="4th">4th</option>
</select>
</div>

次にjsです。

js の方は少し長いので順を追って説明していきます。

以下では select を隠して、ダミー用の ul を表示するためのリンクを作成し、最後にダミー用の ul 変数を作成します。


  $('select').hide();
  var $wrapper = $('div.wrapper');
  var $insert = $('<a>',
    {href:'',class:'trigger'})
      .text($($('select').find('option:selected')).text());
  var $dummyUl = $('<ul>').hide();

次に select 内にある各 option から li , a を作成してダミー用 ul に入れていきます。また初期状態で選択されているものは表示しないようにしておきます。


  var $selectedDefault = false;
  $('select').find('option').each(function() {
    var $li = $('<li>');
    var $selectTrigger = $('<a>',{
      href:'',
      'data-value': $(this).val()
    })
    .text($(this).text());
    $selectTrigger.appendTo($li);
    $li.appendTo($dummyUl);
    if ($(this).prop('selected')) {
      $selectedDefault = $li.hide();
    }
  });

作成したものを$wrapper の中に順次入れていきます。

そしてダミー用の ul の表示・非表示を行うイベントを登録します。


  $insert.appendTo($wrapper);
  $dummyUl.appendTo($wrapper);

  $('a.trigger').on('click', function(e) {
    $dummyUl.stop(true,true).fadeToggle(300);
    e.preventDefault();
  });

最後に、ダミー用の li の中のリンクが押されたときに隠してある本来の
select に値を渡すよう設定します。
そして、選択して非表示になっていた li を表示し、新たに選択された li を
非表示にします。


  $('li a').on('click', function(e) {
    $('select').val($(this).data('value'));
    $('.trigger').text($(this).text());
    var $nextDefault = $(this).parent('li');
    var dfd = $dummyUl.stop(true,true).fadeOut(300);
    dfd
      .promise()
      .done(function() {
        $selectedDefault.show();
        $selectedDefault = $nextDefault.hide();
      });
    e.preventDefault();
  });