MDL(Material Design Lite)でSelectボックスを実装する

Googleのマテリアルデザイン用CSSコンポーネントが便利なので使っているんですけど、

Componentsのところ 等見ていても、select boxがないんですよね。
radioボタンやチェックボックスのみ。

で、どうしたらいいのかとネットの海をさまよっていると、Google公式のガイドラインでそれっぽいスクショが。

Material Design - Menus

どうも、テキストinputとMenuを組み合わせると近しいものができそうです。

で、書いてみたのがこちら

まずHTML。 .mdl-select というクラスを作ってみる。 mdl-menu とfor要素によって、「クリックするとmenuを開く」挙動になる。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-select">
  <input class="mdl-textfield__input" type="text" id="select-section" />
  <label class="mdl-textfield__label" for="sample3">セレクトしよう</label>
  <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="select-section">
      <li class="mdl-menu__item">選択肢1</li>
      <li class="mdl-menu__item">選択肢2</li>
      <li class="mdl-menu__item">選択肢3</li>
      <li class="mdl-menu__item">選択肢4</li>
    </ul>
</div>

で、JS。menuの要素をクリックしたらinputエリアに反映する。

$(function() {
    $('div.mdl-select > ul > li').click(function(e) {
        var text = $(e.target).text();
        $(e.target).parents('.mdl-select').addClass('is-dirty').children('input').val(text);
    });
});

mdl-textfield--floating-label を使わないのであれば、 .addClass('is-dirty') の部分は不要である。
floating-labelを使うと、jsでtext編集をしたときにラベルの位置が変化しなかったため、直接Classを付与することで表示崩れを回避している。

※2015/11/04追記
公式のプルリク で議論がなされているようであるが、検証に時間がかかっている様子。
とりあえずは今回の実装で間に合わせるとして、updateに期待。
ちなみにAngular MaterialというAngularJS向けのコンポーネントには含まれているので、同じものを突っ込んでくれれば十分なのだが・・・

Written on November 2, 2015