JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<body>
    <div style="margin:30px auto;  width:400px; border:1px #888 solid; padding:20px; background-color:#F8F4F0">
        
<h3 style="text-align:center">Tab In, To Open Select Box</h3>
        <br/>
        <br/>
        <form>
            <input style="width:230px" type="text" name="start" value="Start here then tab to next input" tabindex="1" />
            <br/>
            <br/>
            
<h4>One to Seven</h4>

            <div class="selectHolder">
                <select class="select" size="1" expandto="7" tabindex="2">
                    <option value="1" selected="selected">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                    <option value="4">Four</option>
                    <option value="5">Five</option>
                    <option value="6">Six</option>
                    <option value="7">Seven</option>
                </select>
            </div>
            
<h4>One to Ten</h4>

            <div class="selectHolder">
                <select class="select" size="1" expandto="10" tabindex="3">
                    <option value="1" selected="selected">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                    <option value="4">Four</option>
                    <option value="5">Five</option>
                    <option value="6">Six</option>
                    <option value="7">Seven</option>
                    <option value="8">Eight</option>
                    <option value="9">Nine</option>
                    <option value="10">Ten</option>
                </select>
            </div>
            
<h4>One to Four</h4>

            <div class="selectHolder tab4">
                <select class="select" size="1" expandto="4" tabindex="4">
                    <option...

CSS

<style type="text/css"> select {
    position:absolute
}
.selectHolder {
    position:relative;
    height:45px
}
h4 {
    margin:10px 0;
}
h5 {
    margin:50px 0 0 0;
    text-align:center;
    font-weight:normal
}
</style>

JavaScript

$(document).ready(function () {
    $('select').focus(function () {
        $(this).attr("size", $(this).attr("expandto"));
        var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'), 10) + 1) + "']";
        $(x).fadeTo(50, 0);
    });
    $('select').blur(function () {
        $(this).attr("size", 1);
        var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'), 10) + 1) + "']";
        $(x).fadeTo('fast', 1.0);
    });
    $('select option').click(function () {
        $(this).parent().attr("size", 1);
        $(this).parent().val(this.value);
        var x = "select[tabindex='" + (parseInt($(this).parent().attr('tabindex'), 10) + 1) + "']";
        $(x).fadeTo('fast', 1.0);
    });

    $('select').live('keypress', function (e) {
        var key = e.which;
        if (key == 13) // the enter key code
        {
            $(this).attr("size", 1);
            var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'), 10) + 1) + "']";
            $(x).fadeTo('fast', 1.0);
        }
    });

});