如何在值更改後跳轉到下一個下拉菜單？

假設我連續有大約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>

但你可以在控制檯中看到日誌的值是不正確的。

有沒有辦法使用鍵盤更改下拉列表的值，然後跳轉到下一個下拉列表並執行相同操作？

來源

2014-02-05 user2881493

你爲什麼要這個？如果我使用鍵盤，那麼當我切換時不希望它跳躍，因爲我可以使用向下箭頭在選項之間切換。完成後，我將按[Tab]進入下一個選項。 – David

因爲我的老闆就是這樣想的。我對這個決定並不滿意，但他想要這樣做，所以我必須這麼做 - 不知何故。 – user2881493

好吧，試着向他解釋缺乏功能。如果不是，你嘗試了鍵控嗎？ – David

設置一些間隔函數，它檢查所有選擇的當前值，例如，週期爲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（）當前的（只是一個猜測）。

對不起，但似乎它是唯一的醜陋的方式來做到這一點。

來源

2014-02-05 11:27:40 smnbbrv

你可以通過jquery來處理它。

我將它用於「標籤」按。

$('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; 

});

}）;

我認爲這是可以的這個代碼買你需要做一些改變。

來源

2014-02-05 11:42:57 guybennet

如何在值更改後跳轉到下一個下拉菜單？

回答

相關問題