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" style="width:220px;">
        <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" style="width:240px;">
    <option value="1" selected="selected">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
</div>
<h4>One to Dog</h4>
<div class="selectHolder tab4">
  <select class="select" size="1" expandto="5" tabindex="5" style="width:260px;">
        <option value="1" selected="selected">One</option>
        <option value="2">BAT</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').change(function(){
        $(this).attr("size",1); 
        var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";       
        //$(x).fadeTo('fast',1.0);            
    }); 
});