Estoy tratando de escribir JavaScript que se centre en la siguiente entrada cuando selecciono y presiono enter. pero puedo concentrarme en la entrada de texto al presionar enter pero no puedo hacer lo mismo en el menú desplegable de selección. es posible o hay alguna forma de hacerlo
$(document).on('keypress', 'input,select', function(e) { if (e.which == 13) { e.preventDefault(); var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']'); console.log($next.length); if (!$next.length) { $next = $('[tabIndex=1]'); } $next.focus().click(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" /> <select tabIndex="1" class="selectpicker" data-live-search="true" > <option >Alabama</option> <option>Alaska </option> <option>Arizona </option> <option>Arkansas </option> <option>California </option> <option>Colorado </option> <option>Connecticut </option> <option>Delaware </option> <option>Florida </option> <option>Georgia </option> <option>Hawaii </option> <option>Idaho </option> <option>Illinois Indiana </option> <option>Iowa </option> <option>Kansas </option> <option>Kentucky </option> <option>Louisiana </option> <option>Maine </option> <option>Maryland </option> <option>Massachusetts </option> <option>Michigan </option> <option>Minnesota </option> <option>Mississippi </option> <option>Missouri </option> <option>Montana Nebraska </option> <option>Nevada </option> </select> <br><br> <input type="text" name="myname" id="myname" tabIndex="2" /> <input type="text" name="myname1" id="myname1" tabIndex="3" />Simplemente coloque tabIndex en el elemento seleccionado, no en la opción
<select tabIndex="1" class="selectpicker" data-live-search="true" > $(document).on('keypress', 'input,select', function(e) { if (e.which == 13) { e.preventDefault(); var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']'); console.log($next.length); if (!$next.length) { $next = $('[tabIndex=1]'); } $next.focus().click(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" /> <select tabIndex="1" class="selectpicker" data-live-search="true" > <option>Alabama</option> <option>Alaska </option> <option>Arizona </option> <option>Arkansas </option> <option>California </option> <option>Colorado </option> <option>Connecticut </option> <option>Delaware </option> <option>Florida </option> <option>Georgia </option> <option>Hawaii </option> <option>Idaho </option> <option>Illinois Indiana </option> <option>Iowa </option> <option>Kansas </option> <option>Kentucky </option> <option>Louisiana </option> <option>Maine </option> <option>Maryland </option> <option>Massachusetts </option> <option>Michigan </option> <option>Minnesota </option> <option>Mississippi </option> <option>Missouri </option> <option>Montana Nebraska </option> <option>Nevada </option> </select> <br><br> <input type="text" name="myname" id="myname" tabIndex="2" /> <input type="text" name="myname1" id="myname1" tabIndex="3" />