标签：jquery javascript google-chrome html

我有一个选择选项,当用户选择一个选项时,它将从选择中删除并显示为按钮.按下按钮后,该选项将返回到我的选择.鼠标点击一切正常,但如果我们用箭头键导航,用户可以选择我的第一个选项“选择水果”.如何让它无法选择？ 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();
}

解决方法:

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

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

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

并将以下代码附加到cbchange()函数的开头.

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

见jsfiddle example

标签：jquery,javascript,google-chrome,html
来源： https://codeday.me/bug/20190702/1359152.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。