值更改后如何跳到下一个下拉列表

Question

假设我连续大约有20个下拉列表，并希望在使用键盘更改值后自动跳到下一个下拉次数。这个怎么做？我发现onchange事件只有在下拉列表失去焦点（例如Onblur）时才会开火。因此，我尝试了Onkeydown，但这似乎很不稳定和越野车。

这是我尝试的：

<script>
function keydown(dd, e) {
    console.log(dd.value)
    jumptonext(dd);
}
function getNext(current) {
    var all = document.querySelectorAll('select[onkeydown]');
    for (var i = 0; i < all.length; i++) {
        if (all[i] == current && all[i+1]) return all[i+1];
    }
    return all[0];
}
function jumptonext(current) {
    var next = getNext(current);
    next.focus();
}
</script>
<select onkeydown="keydown(this, event)">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select onkeydown="keydown(this, event)">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select onkeydown="keydown(this, event)">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select onkeydown="keydown(this, event)">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

，但是如您在控制台日志中所看到的，值不正确。

是否有一种方法可以使用键盘更改下拉列表的值，然后跳到下一个下拉列表并执行相同的操作？

Answer 1

设置一些间隔函数，该函数检查所有选择的当前值，例如有10ms。如果其中一个的值已更改 - 查看是什么，然后将焦点移至下一个选择。

。

// define array of current values
var values = new Array();
// here fill it with values of your selects
setInterval(function(){
  // here check if some value was changed
  // if there is one changed
    // set the new value into array as a current one
    // jump to next select with .focus()
},10);

我认为这应该足够您的老板。

也许您还需要.blur（）当前一个（只是一个猜测）。

对不起，但似乎这是唯一的丑陋方法。

Answer 2

您可以通过jQuery处理。

我正在将其用于" TAB"出版。

$('body').on('keydown', 'input, select, textarea', function(e) {
var self = $(this)
  , form = self.parents('form:eq(0)')
  , focusable
  , next
  ;
$('.dropBpx').change(function(){
    focusable = form.find('input,a,select,button,textarea').filter(':visible');
    next = focusable.eq(focusable.index(this)+1);
    if (next.length) {
        next.focus();
    } else {
        form.submit();
    }
    return false;
});

}）;

我认为可以购买此代码是可以的，您需要进行一些更改。