HTML / Javascript - stop left /right arrow from changing dropdown menu choice

Question

I am creating a web form with a grid of inputs for creating objects in Django.

It seems that when the focus is on a drop down menu, the up and left arrows select the pr

Answer 1

IN regard to the answer of Ruud Lenders: works only if you have a single select in the form. If you have multiple select dropdowns then you can use the following version:

$(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);
    }
});