SO Help: jQuery: Infinite scrolling Select Box

http://stackoverflow.com/questions/16680180/jquery-infinite-scrolling-select-box

by akmiecik

HTML

<div id="swim_time_inputs">
    <select pattern="[0-9]*" type="number" id="swim_hour" class="spin" name="swim_hour">
    <option>00</option>
    <option>01</option>
    <option>02</option>
    <option>03</option>
    </select><span class="colon">:</span><select pattern="[0-9]*" type="number" id="swim_min" name="swim_min" class="spin" >
    <option>00</option>
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
    <option>22</option>
    <option>23</option>
    <option>24</option>
    <option>25</option>
    <option>26</option>
    <option>27</option>
    <option>28</option>
    <option>29</option>
    <option>30</option>
    <option>31</option>
    <option>32</option>
    <option>33</option>
    <option>34</option>
    <option>35</option>
    <option>36</option>
    <option>37</option>
    <option>38</option>
    <option>39</option>
    <option>40</option>
    <option>41</option>
    <option>42</option>
    <option>43</option>
    <option>44</option>
    <option>45</option>
    <option>46</option>
    <option>47</option>
    <option>48</option>
    <option>49</option>
    <option>50</option>
    <option>51</option>
    <option>52</option>
    <option>53</option>
    <option>54</option>
    <option>55</option>
    <option>56</option>
    <option>57</option>
    <option>58</option>
    <option>59</option></select><span class="colon">:</span><select pattern="[0-9]*" type="number" id="swim_sec" class="spin" name="swim_sec" on>
    <option>00</option>
    <option>01</option>
    <option>02</option>
    <option>03</option>
 ...

JavaScript

$(".spin").on("keydown", function(e) {
    var eKey = e.which || e.key,
        isFirstLast = $(this).find("option:selected").is(":first") || $(this).find("option:selected").is(":last"),
        valFirst = $(this).find("option:first").val(),
        valLast = $(this).find("option:last").val();
    //console.log(valFirst, valLast)
    if (isFirstLast && eKey == 38) {    //    up arro
        $(this).val(valLast);
    }
    else if (isFirstLast && eKey == 40) {    //    down arro
        $(this).val(valFirst);
    }
    
})
.on("keyup", function(e) {
    /*console.log("keyup", e.which, $(this).val());*/
})
.on("change", function(e) {
    //console.log("change");
});

$("*").click(function(e) { $(".spin").focus() });