使用键盘时,<select>更改事件未触发

Question

http://jsfiddle.net/rFEER/

<select id="users">
<option value="1">jack</option>
<option value="2">brill</option>
<option value="3">antony</option>
</select>?

JS:

$("#users").change(function(){
    alert($(this).val());
})?

为什么在单击鼠标之前使用(keyup/keydown)时更改事件未触发

Answer 1

为什么在单击鼠标之前使用(keyup/keydown)时更改事件未触发

当焦点离开时它也会发射select.这就是change事件的运作方式.

如果你想主动通知,你必须留意change和keydown(至少,你可能要click为好)和处理得到一个事件的情况下,当值实际上没有改变,而且你必须处理的事实,其中一些的事件(keydown例如)在更改值之前触发,因此您必须等待片刻才能处理事件.还是看SpYk3HH的答案,它使用keyup代替-这将是积极的少(没有更新,直到键释放,这可能是渴望),但你并不需要的延迟(setTimeout)我下面的代码了.

示例(实时复制):

HTML(我冒昧地改变了价值观,因此每个名字都更加清晰):

<select id="users">
<option value="j">jack</option>
<option value="b">brill</option>
<option value="a">antony</option>
</select>?

JavaScript的:

$("#users").bind("keydown change", function(){
    var box = $(this);
    setTimeout(function() {
        display(box.val());
    }, 0);
});

2016年的注意事项:bind基本上被替换为on.在上面你只是将"bind"替换为"on".

Answer 2

尝试改变

$("#users").change(function(){

至

$("#users").bind('change keyup', function(e) {

应该为onchange事件和按下向上或向上箭头键绑定yyour函数

请注意,您也可以使用keydown,但它可能无法按预期执行,因为您的代码将在进行选择更改之前运行

如果你想要一个无限的滚动选择框,我有一个漂亮的小函数我写到目前为止,至少对我来说,工作完美,可以自己分配所有,而不影响其他键盘操作,当然,并有意图在我们看来,这是关键的工作,所以你仍然必须反复按箭头键,但它将继续循环所有选项.虽然,我很确定它也适用于keydown,但我们不这样使用它,所以我没有测试它.同样,keydown可能无法按预期执行,特别是如果select只有2或3个选项.

function selectInfinateScroll() {
    if ($(this).data("lastSelected")) {
        if ($(this).data("lastSelected")[0] == $(this).children("option:selected")[0]) {
            if ($(this).children("option:selected").index() == 0) {
                $(this).children("option:selected").prop("selected", false);
                $(this).children("option:last-child").prop("selected", true).change();
            }
            else {
                $(this).children("option:selected").prop("selected", false);
                $(this).children("option:first-child").prop("selected", true).change();
            };
        };
    };
    $(this).data("lastSelected", $(this).children("option:selected"));
}

$(function() {
    //  Enable 'Scrolling Through' on Select Boxes
    $("select").keyup(selectInfinateScroll);
});

更新!

我将离开原始答案,因为它使用的替代方法可能对某些人更有用.但是,我提出了一个较短的功能,可用于"keydown"和一个jQuery插件,使用所述功能,允许用户"按住"和箭头键,仍然无限地排序选项!

一,新功能

function keydownInfiniteSelect(e) {
    var eKey = e.which || e.key,
        selected = $(this).find("option:selected");
    if (eKey == 38 && selected.is(":first-child")) {    //    up arro
        $(this).find("option").last().prop("selected", true);    //    set value to last option
        $(this).change();    //    ensure select triggers change do to return false
        return false;    //    keeps select from skipping to second last option
    }
    else if (eKey == 40 && selected.is(":last-child")) {    //    down arro
        $(this).val($(this).find("option").first().val());    //    set value to first option
        $(this).change();    //    ensure select triggers change
        return false;    //    keeps select from skipping to second option
    }
}

使用如下: $("select").keydown(keydownInfiniteSelect);

和jQuery插件风格!

(function($){$.infiniteSelect||($.extend({infiniteSelect:function(b){return b.each(function(){$(this).data("infiniteSelect")||($.fn.on?$(this).on("keydown",$.infiniteSelect.methods.keydownInfiniteSelect).data("infiniteSelect",!0):$(this).bind("keydown",$.infiniteSelect.methods.keydownInfiniteSelect).data("infiniteSelect",!0))})}}),$.fn.extend({infiniteSelect:function(){return $.infiniteSelect($(this))}}),$.infiniteSelect.methods={keydownInfiniteSelect:function(b){b=b.which||b.key;var c=$(this).find("option:selected");
if(38==b&&c.is(":first-child"))return $(this).find("option").last().prop("selected",!0),$(this).change(),!1;if(40==b&&c.is(":last-child"))return $(this).val($(this).find("option").first().val()),$(this).change(),!1}})})(jQuery);

用作$("select").infiniteSelect() OR $.infiniteSelect("select")

jsFiddle of Plugin _Mini fied

未切割的插件小提琴

PS.我几乎已经为函数准备了一个Vanilla JavaScript,除了该方法的"set to last option"部分保持死亡,或者为null,或者跳到倒数第二个.我似乎无法正确设置它.如果有人想要修复并更新,我会非常感激.见这里

Answer 3

这是正常行为......

引用w3c规范

更改
当控件失去输入焦点并且自获得焦点后其值已被修改时,会发生更改事件.此事件对INPUT,SELECT和TEXTAREA有效.元件.