当我 select bootstrap select 搜索下拉列表时如何写入 JavaScript 以专注于下一个输入

Question

我正在尝试编写 JavaScript，当我 select 并按回车键时，它会专注于下一个输入。但我能够专注于按下 enter 时的文本输入，但无法在 select 下拉菜单上做同样的事情。有没有可能或者有什么办法可以做到

$(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" />

Answer 1

只需将 tabIndex 放在 select 元素上，而不是选项

<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" />

当我 select bootstrap select 搜索下拉列表时如何写入 JavaScript 以专注于下一个输入

how to write to JavaScript to focus on next input when i select bootstrap select search dropdown

html

javascript

bootstrap-4