i'am trying write JavaScript that focus on next input when i select and press enter. but iam able to focus on text input on pressing enter but not able to do same on select drop down. is it possible or there any way to do it
$(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" />Just put the tabIndex on the select element, not the option
<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" />