JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<p id="keyInfo"></p>
<fieldset>
  <label for="number">Select a number</label>
  <select name="number" id="number">
    <option>1</option>
    <option selected="selected">two</option>
    <option>3</option>
    <option>four</option>
    <option>5</option>
    <option>six</option>
    <option>7</option>
    <option>eight</option>
    <option>9</option>
    <option>ten</option>
    <option>11</option>
    <option>twelve</option>
    <option>13</option>
    <option>fourteen</option>
    <option>15</option>
    <option>sixteen</option>
    <option>17</option>
    <option>eighteen</option>
    <option>19</option>
  </select>
</fieldset>

CSS

fieldset {
  border: 0;
}

label {
  display: block;
  margin: 30px 0 0 0;
}

select {
  width: 200px;
}

.overflow {
  height: 200px;
}

JavaScript

$(function() {
  $("#number").selectmenu().selectmenu("menuWidget").addClass("overflow");
  $(document).keydown(function(e) {
    var key = e.which;
    $("#keyInfo").html("Ascii Key : " + key);
  });
});