Javascript 通过Google Chrome中的箭头键使选择的第一个选项不可选择

我有一个带有选项的选择，当用户选择一个选项时，它将从选择中删除并显示为按钮。按下按钮后，该选项返回到“我的选择”。鼠标点击一切正常，但如果我们使用箭头键导航，用户可以选择我的第一个选项，即选择水果。如何使其不可选择？disabled=disabled不起作用。这是一个JSFIDLE。要重现该问题，请选择一种水果，然后按键盘上的向上箭头键

编辑：只发生在谷歌浏览器中

禁用箭头键是可行的，但我想用另一种方法来实现这一点

HTML:

Javascript:

var fieldnames = [];
var valuenames = [];  
function sortComboBox() {
    document.getElementById("combobox").remove(0);
    var my_options = $("#combobox option");
    my_options.sort(function (a, b) {
        if (a.text.toUpperCase() > b.text.toUpperCase()) return 1;
        if (a.text.toUpperCase() < b.text.toUpperCase()) return -1;
    return 0;
    });
    $("#combobox").empty().append('<option>Choose Fruit</option>').append(my_options);
    $('#combobox option:first-child').attr("selected", "selected");
}  
function cbchange() {
    var index = $('#combobox').get(0).selectedIndex;
    var text = $('#combobox option:selected').text();
    var selectedItem = $('#combobox').val();
    $('#buttons').append('<table class="ui"><tr><td class="variable">' + text + '</td><td class="icon"><span id="' + selectedItem + '" class="icon ui" value="X" onclick="addOption(\'' + text + '\',this.id)">X</span></td></tr></table>');
    $('#combobox option:eq(' + index + ')').remove();
    fieldnames.push(text);
    valuenames.push(selectedItem);
}
function addOption(text, selectedItem) {
    for (var i = valuenames.length - 1; i >= 0; i--) {
        if (valuenames[i] === selectedItem) {
            valuenames.splice(i, 1);
            fieldnames.splice(i, 1);
        }
    }
    $("#combobox").append($("<option></option>").val(selectedItem).text(text));
    $('#' + selectedItem).parent().parent().parent().parent().remove();
    sortComboBox();
}

---

对代码进行简单的更改可以解决您的问题

给默认选项一些奇怪的值。例如：

<option value="null" selected="selected">Choose Fruit</option>

看

<option value="null" selected="selected">Choose Fruit</option>

if($('#combobox').val()=="null"){
        return false;
    }