jQueryプラグインのselect2を使ったセレクトボックスのカスタマイズ

select2というjQueryプラグインを使うことで、セレクトボックスに機能をつけることが出来ます。もちろんCSSなどでカスタマイズが可能です。

カスタマイズ時には、記述したHTMLのコードに、自動生成されるコードを隣接セレクタとして指定することでカスタマイズすることが出来ます。

コード例です。

/*html*/

<select class="p-selectbox1">

  <option value="こぶた">こぶた</option>

  <option value="たぬき">たぬき</option>

  <option value="きつね">きつね</option>

  <option value="ねこ">ねこ</option>

</select>

/*js*/

/*select2基本的な使い方*/

$(document).ready(function(){

    $('.p-selectbox1').select2();

});

/*css*/

/*カスタマイズ例　隣接セレクタを指定*/

.p-selectbox1 + .select2 {

  overflow-y: scroll;

  height:100px;

}

以上です

サービスのご購入はこちらから。