JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<select id="cities1" multiple="multiple" name="cities[]" title="選択してください" class="sminit">
      　<option>項目-01</option>
        <option>項目-02</option>
        <option>項目-03</option>
        <option>項目-04</option>
        <option>項目-05</option>
        <option>項目-06</option>
        <option>項目-07</option>
        <option>項目-08</option>
        <option>項目-09</option>
        <option>項目-10</option>
        <option>項目-11</option>
        <option>項目-12</option>
        <option>項目-13</option>
        <option>項目-14</option>
        <option>項目-15</option>
        <option>項目-16</option>
        <option>項目-17</option>
        <option>項目-18</option>
        <option>項目-19</option>
        <option>項目-20</option>
    </select>

JavaScript

/*
 * Better Select Multiple - jQuery Plugin
 *
 * based on Alternate Select Multiple (asmSelect) 1.0.4a beta (http://www.ryancramer.com/projects/asmselect/)
 * 
 * Copyright (c) 2009 by Ryan Cramer - http://www.ryancramer.com
 * Copyright (c) 2010 by Victor Berchet - http://www.github.com/vicb
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
 *
 * bsmSelect version: v1.4.0 - 2010-09-05
 */

(function($) {

  function BsmSelect(target, options)
  {
    this.$original = $(target);             // the original select multiple
    this.buildingSelect = false;            // is the new select being constructed right now?
    this.ieClick = false;                   // in IE, has a click event occurred? ignore if not
    this.ignoreOriginalChangeEvent = false; // originalChangeEvent bypassed when this is true
    this.options = options;
    this.buildDom();
  }

  BsmSelect.prototype = {
    /**
     * Generate an UID
     */
    generateUid: function(index) {
      return this.uid = this.options.containerClass + index;
    },

    /**
     * Build the DOM for bsmSelect
     */
    buildDom: function() {
      var self = this, o = this.options;

      for (var index = 0; $('#' + this.generateUid(index)).size(); index++) {}

      this.$select = $('<select>', {
        'class': o.selectClass,
        name: o.selectClass + this.uid,
        id: o.selectClass + this.uid,
        change: $.proxy(this.selectChangeEvent, this),
        click: $.proxy(this.selectClickEvent, this)
      });

      this.$list = $.isFunction(o.listType) 
        ? o.listType(this.$original)
        : $('<' + o.listType + '>', { id: o.listClass + this.uid });
      
      this.$list.addClass(o.listClass);

      this.$container = $('<div>', { 'class':  o.containerClass, id: this.uid });

      this.buildSelect();

      this.$original.change($.proxy(this.originalChangeEvent, this)).wrap(this.$container).before(this.$select);

      // if the list isn't already...