Select2ライブラリは非常に強力で簡単です。

私たちは、Select2ライブラリを利用して、セレクトボックスとhidden inputをSelect2 UIにすることができる。ところがセレクトボックス形式でUIを使用する場合は、新しい入力をするようにすることが基本的に提供されない。もちろん、tag機能を利用すれば簡単に実現することができる。しかし、tag機能を利用すると、UIがtag形で出てくる。セレクトボックス形式のUIが必要なときは使用できない方法である。

したがって、以下の説明は、tag機能を利用せずに、セレクトボックス形式のUIで新しい入力を可能にする方法である。

これ作ることができる。

HTML

<input type="hidden" name="email_server" 
    data-list='[{"id":"hanmail.net","text":"hanmail.net"}, {"id":"gmail.com","text":"gmail.com"}, {"id":"naver.com","text":"naver.com"}, {"id":"hotmail.com","text":"hotmail.com"}]'
    data-default-value='{"id":"left21.com","text":"left21.com"}'
    id="email_server" class="select2-input">

JS

// 選択するだけでなく、入力もできるselect2。 input[hidden]でなければ、data-liat要素がなければならない。
// default値を指定したい場合、data-default-valueを要素に入れてくれれば良い。
$("input.select2-input").each(function(){
  try{
    var $this = $(this);
    var list = $this.data('list');
    var default_value = $this.data('default-value');
    var option = { 
      data: list,
      createSearchChoice: function (term){
        return {id: term, text: term};
      },
      initSelection: function (element, callback) {
            callback(default_value);
        }
    };
    
    $this.select2(option);
    
    // デフォルト値がある場合は設定します。
    if(default_value){
      $this.select2('val', default_value);
    }
  }catch(e){
    
  }
});

try、catch構文はquery function not defined for Select2 undefinedというエラーメッセージがFirefoxで出てきてjsの動作が停止されることから取り込んだのだ。

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。