Question

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

编辑：只在GOOGLE CHROME中发生。

禁用箭头键有效，但我想要另一种方法来实现这一点。

HTML：

<select id="combobox" onchange="cbchange();">
    <option selected="selected">Choose Fruit</option>
    <option value="apple">apple</option>
    <option value="pear">pear</option>
    <option value="orange">orange</option>
    <option value="banana">banana</option>
</select>
    <br>
    <br>
 <div id="buttons"></div>

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

Answer 1

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

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

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

并将以下代码附加到cbchange（）函数的开头。

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

请参阅jsfiddle example

首先选择在Google Chrome中选择不可选择的箭头键

1 个答案: