on_selectの使い方

on_select documentation

導入

<script type="text/javascript" src="https://ohiro.ndjp.net/js/on_select.js"></script>
と、<head>か<body>のどこかしらに記述しておいてください。
(HTML5以降で記述する場合、type="text/javascript"は要りません。)

使用

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

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

選択変更時のコールバックには、何らかの関数を入れることができます。iとvalの2つの引数が使えます。
iには選択された項目の上から数えた順番、valには選択された項目の文字列が入っています。

例

<!-- セレクトボックスが入る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()で選択された項目の文字列を取得できます。

例

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

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

高度なカスタマイズ

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>

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

  .pnotosans{
    font-family: 'Noto Sans JP';
    color: red;
  }

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

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

  .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>