on_selectの使い方

on_select documentation

on_selectは、<select>に依存せずセレクトボックスを作れるJSプラグインです。
IE 6以上、Chrome 1以上、Safari 3以上、Firefox 1.5以上で動作します。

導入

<script type="text/javascript" src="https://ohiro.ndjp.net/js/on_select.js"></script>を、
<head>か<body>のどこかしらに記述しておいてください。

使用

セレクトボックスが入るDIVには、class="on_select"をつけてください。また、何かしらIDをつけておいてください。

JSはvar DIVのID = on_select(DIVのID, 選択肢, 選択変更時のコールバック)という形で記述します。
選択肢は["りんご", "みかん", "ぱなま"]のような配列で記述します。

選択変更時のコールバックには、何らかの関数を入れることができます。iとvalの2つの引数が使えます。
iには選択された項目の上から数えた順番、valには選択された項目の文字列が入っています。
（V1.4.0以降は、選択肢をオブジェクトで指定してvalueを設定している場合、その値が入ります。詳しくは「選択肢の個別指定」をご覧ください。）

例

<!-- セレクトボックスが入るDIV -->
<div id="SelectBoxID" class="on_select"></div>

<!-- セレクトボックスを作るJS -->
<script type="text/javascript">
  var SelectBoxID = on_select('SelectBoxID', ['うぐい', 'えぞうぐい', 'うけくちうぐい', 'じゅうさんうぐい'], 
    function (i, val) {
      alert(val + 'が選択されました');
    }
  );
</script>

枠の色を変えることもできます。

class名	完成品
midoriselect
kiiroselect
mizuselect
aoselect
akaselect

class名	完成品
daidaiselect
aotakeselect
wakakusaselect
wakamurasakiselect
fujimurasakiselect

操作

セレクトボックスの操作にはsetSelectedIndexというメソッドを使います。

DIVのID.setSelectedIndex(選択したい項目の上から数えた順番);という形で使います。

値を取得することもできます。
getSelectedIndex()で選択された項目の上から数えた順番、
getSelectedValue()で選択された項目の文字列を取得できます。
（V1.4.0以降は、valueを設定している場合はその値になります。）

例

<div id="SelectBoxID" class="on_select"></div>

<script type="text/javascript">
  var SelectBoxID = on_select('SelectBoxID', ['うぐい', 'えぞうぐい', 'うけくちうぐい', 'じゅうさんうぐい']);
  SelectBoxID.setSelectedIndex(2);
</script>

選択肢の個別指定

V1.4.0以降は、選択肢1つ1つにclass名やスタイルをつけたり、表示する文字とは別の値をもたせたりできます。ここでは、フォントを選ぶセレクトボックスを例に説明します。

まず、選択肢につけるclassのCSSを用意します。

<style type="text/css">
  .pnotosans{
    font-family: 'Noto Sans JP';
    color: red;
  }

  .pmeiryo{
    font-family: 'Meiryo';
    color: white;
    background-color: limegreen;
  }

  .pmeiryo:hover{
    background-color: green !important;
  }

  .pmspg{
    font-family: 'MS PGothic','ＭＳ Ｐゴシック';
    position: relative;
    color: #fff;
    background: #111;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    font-size: 20px;
    font-weight: 600;
    overflow: hidden;
  }

  .pmspg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
      #ff004c, #ff8a00, #ffe600, #21e6a4, #00c2ff, #6a5cff, #ff2bd6, #ff004c);
    background-size: 300% 100%;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .pmspg:hover {
    transform: translateY(-1px);
  }

  .pmspg:hover::after {
    opacity: 1;
    animation: rainbow-slide 3s linear infinite;
  }

  @keyframes rainbow-slide {
    0%   { background-position:   0% 50%; }
    100% { background-position: 300% 50%; }
  }
</style>

選択肢にマウスを重ねたときの背景色は、セレクトボックス側で.on_select-options div:hover（#f0f0f0）が指定されています。変えたいときは、それより強いセレクタで書いてください。

1. オブジェクトで指定する

選択肢を文字列のかわりに、次のようなオブジェクトで書くこともできます。文字列と混ぜて使うこともできます。

{label: 表示する文字列, value: 値, className: class名, style: スタイル}

label…選択肢に表示される文字列です。
value…コールバックのvalやgetSelectedValue()で返される値です。省略するとlabelが返ります。
className…その選択肢につけるclass名です。
style…その選択肢につけるスタイルです。"color: red;"のような文字列で書きます。

例

<!-- セレクトボックスが入るDIV -->
<div id="SelectBoxID" class="on_select"></div>

<!-- フォントを変える文章 -->
<div id="FontSample" style="font-family: 'Noto Sans JP', sans-serif;">
  吾輩は猫である。名前はまだ無い。<br>
  The quick brown fox jumps over the lazy dog.
</div>

<!-- セレクトボックスを作るJS -->
<script type="text/javascript">
  var SelectBoxID = on_select('SelectBoxID', [
    { label: 'Noto Sans', value: "'Noto Sans JP', sans-serif", className: 'pnotosans' },
    { label: 'メイリオ', value: "'Meiryo', sans-serif", className: 'pmeiryo' },
    { label: 'MS Pゴシック', value: "'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif", className: 'pmspg' }
  ], function (i, val) {
    document.getElementById('FontSample').style.fontFamily = val;
  });
</script>

2. optionClass で指定する

選択肢は文字列のまま、class名だけをあとから決めることもできます。on_selectの4つ目の引数に、設定を渡します。
var DIVのID = on_select(DIVのID, 選択肢, 選択変更時のコールバック, 設定)

optionClassには、{'ラベル': 'class名'}という対応表を渡します。対応表のかわりに、function (label, i)という関数を渡して、class名を返すこともできます。

例

<div id="SelectBoxID" class="on_select"></div>

<script type="text/javascript">
  var SelectBoxID = on_select('SelectBoxID', ['Noto Sans', 'メイリオ', 'MS Pゴシック'], null, {
    optionClass: {
      'Noto Sans': 'pnotosans',
      'メイリオ': 'pmeiryo',
      'MS Pゴシック': 'pmspg'
    }
  });
</script>

3. onRebuild で加工する

設定のonRebuildには、選択肢が作られるたびに実行される関数を渡します。そのセレクトボックスだけに作用するので、セレクトボックスごとに別々の関数を指定できます。
関数には、次の項目が入った引数infoが渡されます。

info.container…セレクトボックスのDIVです。
info.optionsDiv…選択肢の一覧が入っているDIVです。
info.optionElements…選択肢1つ1つの要素が入った配列です。
info.options…on_selectに渡した選択肢の配列です。

※onRebuildは、最初にセレクトボックスが作られるときには実行されず、セレクトボックスを開くたびに実行されます。

例（いま選んでいる項目の左に線を引く）

<div id="SelectBoxID" class="on_select"></div>

<script type="text/javascript">
  var SelectBoxID = on_select('SelectBoxID', ['Noto Sans', 'メイリオ', 'MS Pゴシック'], null, {
    optionClass: {
      'Noto Sans': 'pnotosans',
      'メイリオ': 'pmeiryo',
      'MS Pゴシック': 'pmspg'
    },
    onRebuild: function (info) {
      var i = SelectBoxID.getSelectedIndex();
      info.optionElements[i].style.borderLeft = '6px solid orange';
    }
  });
</script>

高度なカスタマイズ（rebuildplus）

V1.4.0以降は、上の「選択肢の個別指定」の方法をおすすめします。rebuildplusはこれまでどおり使えますが、1ページに1つしか定義できません。
function rebuildplus(optionsDiv, container) {};のように、選択肢の入ったDIV（optionsDiv）とセレクトボックスのDIV（container）を引数で受け取ることもできます。

function rebuildplus() {};で、オプションをJSを使ってカスタマイズできます。
オプションが構築されるたびに実行します。

例

<div id="SelectBoxID" class="on_select"></div>

<script type="text/javascript">
  var SelectBoxID = on_select('SelectBoxID', ['Noto Sans', 'メイリオ', 'MS Pゴシック']);
  function rebuildplus() {
    var fontDiv = document.getElementById('SelectBoxID');
    if (!fontDiv) return;

    var children = fontDiv.getElementsByTagName('div');
    var optionsDiv = null;
    for (var i = 0; i < children.length; i++) {
      if (children[i].className.indexOf('on_select-options') !== -1) {
        optionsDiv = children[i];
        break;
      }
    }
    if (!optionsDiv) return;

    var classMap = {
      'Noto Sans': ['pnotosans'],
      'メイリオ': ['pmeiryo'],
      'MS Pゴシック': ['pmspg']
    };

    var options = optionsDiv.getElementsByTagName('div');
    for (var j = 0; j < options.length; j++) {
      var text = options[j].innerText || options[j].innerHTML;

      text = text.replace(/^\s+|\s+$/g, '');

      if (classMap[text]) {
        options[j].className = classMap[text].join(' ');
      }
    }
  };
</script>