JSFiddle - React, Tailwind, and code Playground

by Roshanwu

HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jquery-diyslect demo</title>
  </head>
  <body style="padding: 20px;">
    <div class="container">
      <a class="ribbon" href="http://github.com/RoshanWu/diySelect" target="_blank"><img src="http://i93.photobucket.com/albums/l57/ShakeSpace/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
      <h1>jquery-diyselect</h1>
      <p>A simple jQuery plugin used to diy the default select in HTML</p>
      <h2>common use</h2>
      <div class="example">
        <code>$("#example1").diySelect();</code>
        <label for="example1">
        </label>
        <select name="example1" id="example1">
          <option value="0" selected>choose</option>
          <option value="1">item1</option>
          <option value="2">item2</option>
          <option value="3">item3</option>
        </select>
      </div>
      <h2>custom placeholder text of select</h2>
      <div class="example">
        <code>$("#example2").diySelect({checkText: 'please choose me'});</code>
        <label for="example2">
        </label>
        <select name="example2" id="example2">
          <option value="0" selected>choose</option>
          <option value="1">item1</option>
          <option value="2">item2</option>
        </select>
      </div>
      <h2>select resize</h2>
      <div class="example">
        <code>$("#example3").diySelect({autoWidth: true});</code>
        <label for="example3">
        </label>
        <select name="example3" id="example3">
          <option value="0" selected>choose</option>
          <option value="1">item1</option>
          <option value="2">item2</option>
          <option value="3">long long long item3</option>
        </select>
      </div>
      <h2>custom select width</h2>
      <div class="example">
        <code>$("#example4").diySelect({width: 200});</code>
        <label for="example4">
        </label>
        <select name="example4" id="example4">
          <option...

CSS

/* diyselect */
.fakeSelect { background: url(https://raw.github.com/RoshanWu/diySelect/master/img/select-sprite.gif) no-repeat; }
/* select-simulation */
.fakeSelect { display: inline-block; height: 20px; padding: 4px 28px 4px 5px; color: #4d4d4d; border: 1px solid #a2a2a2; box-shadow: inset 1px 1px 4px 0 #f3f3f3; vertical-align: middle; font-size: 14px; cursor: pointer; background-position: right 5px; margin-right: 5px; }
.fakeSelect:hover { background-position: right -22px; text-decoration: none; }
.fakeOption { border: 1px solid #cbcbcb; background-color: #fff; }
.fakeOption li { line-height: 30px; padding: 0 5px; cursor: pointer; font-size: 14px; padding-right: 28px; white-space: nowrap; }
.fakeOption .selected { background-color: #f6f6f6; }
/* if gt IE6 */
html > body .fakeOption li { height: 30px; }
/* example */
body { background-color: #eee; color: #444; font: 14px/18px sans-serif; }
h1 { margin: 0 0 0.5em; font-size: 38px; font-weight: bold; }
h2 { margin: 1.1em 0 0.5em; font-size: 24px; font-weight: bold; }
.container { position:relative; overflow:hidden; width: 700px; padding: 40px 60px; border: 1px solid #ccc; margin: 40px auto 20px; background: #fff; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.1); box-shadow: 0 0 15px rgba(0,0,0,0.1); }
.ribbon { position: absolute; top: -1px; right: -1px; opacity: 0.9; }
.ribbon:hover, .ribbon:focus, .ribbon:active { opacity: 1; }
.ribbon img { display: block; border: 0; }
.example { border: 1px dashed #ccc; margin: 10px -20px 20px; padding: 20px; }
.example label { display: block; margin-bottom: 0.5em; }
.example code { font: 14px/22px Menlo,Monaco,"Andale Mono","lucida console","Courier New",monospace !important }
.example button { vertical-align: middle; }

JavaScript

(function ($) {

  /**
   * jQuery diyselect plugin
   * @param {object|string} options
   * @returns {object} jQuery object
   */
  $.fn.extend({
    diySelect: function (options) {
      options = $.extend({}, $.DiySelecter.defaults, options);
      return this.each(function () {
        new $.DiySelecter(this, options);
      });
    },
    revertSelect: function () {
      return this.trigger('restore');
    },
    chooseSelect: function (options) {
      return this.trigger('choose', [options]);
    }
  });

  /**
   * DiySelecter class
   * @param {object} t current select object
   * @param {object} opt Settings
   * @constructor
   */
  $.DiySelecter = function (t, opt) {
    var i, $li,
      active = -1,
      count = 0,
      isIE6 = !window.XMLHttpRequest,
      checkText = opt.checkText || $(t).find('option:selected').text(),
      $fakeSelect = $('<span/>').addClass(opt.selectClass).text(checkText),
      $fakeOption = $('<ul/>').addClass(opt.optionClass).css({
        position: 'absolute',
        zIndex: opt.zIndex,
        overflow: 'auto',
        overflowX: 'hidden'
      }),
      $bgIframe = $('<iframe/>').addClass('bgiframe').attr('frameborder', '0');

    // init DOM elements
    var init = function () {

      // avoid fake select take a incorrect width when using custom checkText
      var $tempLi;

      $(t).hide();
      $fakeSelect.insertAfter($(t));
      $fakeOption.insertAfter($fakeSelect);

      // fill up fake options with data by ajax or from original select
      if (opt.ajaxUrl) {
        $.ajax({
          type: 'GET',
          url: opt.ajaxUrl,
          dataType: opt.dataType,
          async: false,
          success: function (data) {
            opt.parseData.apply($fakeOption[0], [data]);
          }
        });
      } else {
        var $option = $(t).find('option');
        var len = $option.length;

        for (i = 0; i < len; i++) {
          $('<li/>').html($option.eq(i).text())
           ...