JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

First Name: <input type="text" name="firstName" id="firstName" style="width:200px;margin-bottom:20px;" /><br />
Last Name: <input type="text" name="lastName" id="lastName" style="width:200px;margin-bottom:20px;" /><br />
Product Name:
<div class="reg-select-container" style="position:relative;z-index:200;">
      <input type="text" name="regOptionSelected_ProductName" id="regOptionSelected_ProductName" class="reg-select" value="- Select -" onfocus="showSelectOptions('regSelectOptions_ProductName','regOptionSelected_ProductName');" />
      <div style="position:absolute;top:23px;left:0;">
            <div id="regSelectOptions_ProductName" style="width:auto;border:1px solid #a3b4c4;display:none;">
                  <div id="regSelectOption_ProductName_0" style="width:auto;padding:0 2px;background-color:#edf8fd;cursor:default;" onmouseover="this.style.background='#0560a9';this.style.color='#fff';" onmouseout="this.style.background='#edf8fd';this.style.color='#000';" onmousedown="hideSelectOptions('regSelectOptions_ProductName','regOptionSelected_ProductName','','- Select -','regProductName');">- Select -</div>
                  
                        <div id="regSelectOption_ProductName_1" style="width:auto;padding:0 2px;background-color:#edf8fd;cursor:default;" onmouseover="this.style.background='#0560a9';this.style.color='#fff';" onmouseout="this.style.background='#edf8fd';this.style.color='#000';" onmousedown="hideSelectOptions('regSelectOptions_ProductName','regOptionSelected_ProductName','1','AOC 24in Flat Panel LCD Monitors','regProductName');">AOC 24in Flat Panel LCD Monitors</div>
                  
                        <div id="regSelectOption_ProductName_2" style="width:auto;padding:0 2px;background-color:#edf8fd;cursor:default;" onmouseover="this.style.background='#0560a9';this.style.color='#fff';" onmouseout="this.style.background='#edf8fd';this.style.color='#000';"...

CSS

.reg-select {
      border: 1px solid #a3b4c4; /* For non-IE */
      margin-top: 1px;
      padding-left: 1px;
      *padding-left: 2px;
      background: #edf8fd url(/images/DropDownArrow.png) 100% no-repeat;
      width: 158px;
      height: 22px;
      cursor: default;
}

JavaScript

$.fn

$(document).ready(function() {
    // Determine if click occurred outside of div with class 'reg-select-container'. If so, hide select options.
    $(document).bind('click', function(e) {
        if ($(e.target).closest('.reg-select-container').length == 0) hideSelectOptions('regSelectOptions_ProductName', 'regOptionSelected_ProductName');
        //if ($(e.target).closest('.reg-select-container').length == 0) hideSelectOptions('regSelectOptions_ProductColor', 'regOptionSelected_ProductColor');
        //if ($(e.target).closest('.reg-select-container').length == 0) $('div[id^="regSelectOptions_"]').hide();
    });
    
});

function showSelectOptions(selectOptions, optionSelected) {
    document.getElementById(selectOptions).style.background = '#fff';
    $('#' + optionSelected).blur();
    $('#' + selectOptions).show().focus();
    alert(selectOptions);
    $(document).bind("keydown", function(e) {
        if ($('#' + selectOptions +':visible').length != 0) {
            
            var keyCode = e.keyCode || e.which;

            if (keyCode == 38) {
                alert("up");
            } else if (keyCode == 40) {
                alert("down");
            }else if (keyCode == 13){
                alert("enter");
            }

        }
    });
}

function hideSelectOptions(selectOptions, optionSelected, optionValue, optionText, selectElementID) {
    optionValue = (typeof optionValue == 'undefined') ? '' : optionValue;
    optionText = (typeof optionText == 'undefined') ? '' : optionText;
    $('#' + selectOptions).hide();

    if (optionText != '') {
        if (optionText.length > 19) optionText = optionText.substring(0, 19) + "...";
        $('#' + optionSelected).val(optionText);
        $('#' + selectElementID).val(optionValue);
    }
}