JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div id="container">
  <select id="select">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="baaz">Baaz</option>
    <option value="quux">Quux</option>
  </select>
</div>

SCSS

#container {
  margin: 40px auto 0;
  width: 100px;
}
#select {
    font-size: 16px
}

ul.mySelect {
    cursor: pointer;
}

CoffeeScript

$.fn.mySelect = ->
  this.each ->
    $select = $(this)      
    $select.hide()
    options = $(this).find("option")
    div = $("<ul/>", class: "mySelect")
    options.each ->
      div.append $("<li/>").text($(this).text())
    console.log div
    $(this).after(div)
    children = div.children()
    children.not(":first-child").hide()
    visible = false
    children.click ->
      if visible
        children.not(this).hide()
        $select.children().attr("selected", false)
        $select.children().eq($(this).index()).attr("selected", true)
      else
        children.show()
      visible = !visible
      
    
$("select").mySelect()