Select Polyfill

by SamHasler

HTML

<!DOCTYPE html>
<html>
  <head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
      </head>
  <body>
    <button type="button" onclick="runThis()">
      Show dropdown items
    </button>

    <button type="button" onclick="$('#messages').html('')">
      CLEAR
    </button>
      
    <div>
      
      <select id="test">
        <option>1</option>
        <option>2</option>
      </select>
      
      <select id="notest">
        <option>1</option>
        <option>2</option>
      </select>
      
    </div>
    <div id="messages">
    </div>
  </body>
</html>

CSS

button{
margin-bottom: 1em;
}
x.dropDownOpen {
    background: #FAA;
}

#messages{
  margin-top: 5em;
  background-color: beige;
  min-height: 5em;
}

JavaScript

var ALT = 18, RET = 13, ESC = 27, TAB = 9, DOWN = 40, selected;

function isDropDownClosingKeyCode(keyCode){
    return RET === keyCode || ESC === keyCode || TAB === keyCode
}

function ddAttachKeyListener(dd){
  $(dd).on('keydown.ddPloy', function(e){
//    info( 'keydown');
    if (isDropDownClosingKeyCode(e.keyCode)){
      info( 'keydown Closing Key');
      $(e.target).off('keydown.ddPloy');
      return true;
    }
  }).on('keyup.ddPloy', function(e){
//    info('keyup');
    if (isDropDownClosingKeyCode(e.keyCode)){
      info('keyup Closing Key');
      ddClose(e.target);
      $(e.target).off('keyup.ddPloy');
      return false;
    }
  }).on('keypress.ddPloy', function(e){
//    info( 'keypress' );
    if (isDropDownClosingKeyCode(e.keyCode)){
      info( 'keypress Closing Key' );
      ddClose(e.target);
      $(e.target).off('keypress.ddPloy');
      return false;
    }
  });
}
$(document).ready(function(){
    var altDown = false;
  $("body").on('keydown', function(e){
    if (ALT === e.keyCode){
        altDown = true;
    }
    if (altDown && DOWN === e.keyCode){
        var focusedSelect = $('select:focus')[0];
        if (focusedSelect){
           showDropdown(focusedSelect); 
            return false;
        }
    }
    if (RET === e.keyCode || ESC === e.keyCode){
      if (e.target.nodeName === "SELECT") {
        warn('keydown <b>GLOBAL</b> on <select>' );
      } else {
        warn('keydown <b>GLOBAL</b> on '+ e.target.nodeName);
      }
    }
  }).on('keyup', function(e){
    if (ALT === e.keyCode){
        altDown = false;
    }
    if (RET === e.keyCode || ESC === e.keyCode){
      if (e.target.nodeName === "SELECT") {
        warn('keyup <b>GLOBAL</b> on <select>' );
      } else {
        warn('keyup <b>GLOBAL</b> on '+ e.target.nodeName);
      }
    }
  }).on('keypress', function(e){
    if (RET === e.keyCode || ESC === e.keyCode){
      if (e.target.nodeName === "SELECT") {
        warn('keypress <b>GLOBAL</b> on <select>' );
     ...