HTML / Javascript -停止左/right箭头更改下拉菜单选择

Question

我正在创建一个带有输入网格的web表单，用于在Django中创建对象。

当焦点放在下拉菜单上时，向上和左箭头选择前一项，右/向下箭头选择下一项。

我想使用左右箭头将焦点左右移动到网格上(有点像excel那样)。我可以禁用左右箭头更改菜单选项(同时保留向上/向下箭头的功能)吗？

Answer 1

卢德的回答可以工作，但是如果仔细观察或者在事件中运行了大量代码，您将看到select值会更改下一个元素并返回到原来的元素。

这里有一个在Firefox上工作的解决方案，在我看来更干净。在其他浏览器中未经测试。

诀窍就是在keydown事件中将select设置为禁用，然后使用setTimeout在下一个帧上重新启用它。在处理完事件处理程序中的所有代码后，匿名函数才会运行，从而确保select不会过早地重新启用。

mySelect.addEventListener('keydown', 
    function (event) {
        switch (event.which || event.keyCode || event.charCode) {
            case 33:
                this.disabled = true;
                setTimeout(function (elem) {elem.disabled = false;}, 0, this);
                break;

            case 34:
                this.disabled = true;
                setTimeout(function (elem) {elem.disabled = false;}, 0, this);
                break;
        }
    });

这是JSFiddle

Answer 2

对于卢德贷款人的答案：只在表单中有一个选择时才能工作。如果有多个select下拉列表，则可以使用以下版本：

$(document).on('keydown', 'select', function(event) {
    var value = $(this).find('option:selected').val();
    if ((event.which == 37 || event.which === 39)) {
        setTimeout(function (obj, val) {
            console.log(val)
                return function() {
                    obj.find('option[value="' + val + '"]').prop("selected", true)
                }
        }($(this), value), 0);
    }
});