爲select的option綁定鍵盤事件

1. 目的

　　可使用快捷鍵一、二、三、4等自動選中select框對應的option

2. 代碼

<select id="selectItem" class="form-control">
    <option>北京</option>
    <option>上海</option>
    <option>廣州</option>
    <option>深圳</option>
</select>

$("#selectItem").focus(function() {
    // 動態設置size支持option的事件監聽
    this.size = this.children.length;
}).blur(function() {
    this.size = 1;
});

$("#selectItem option").click(function() {
    $("#selectItem option").each(function() {
        $(this).removeAttr("selected");
    });
    $(this).attr("selected", true);
    $("#selectItem").blur();
});

$(document).keydown(function(event) {
    var key = event.which; // 獲取按鍵的ascii碼
    var num = key - 48; // 獲取對應的數字
    if (num >= 1 && num <= 4) { // 只有4個下拉框，只處理1-4
        var count = 1; // 計數
        $("#selectItem option").each(function() {
            if (count == num) {
                $("#selectItem").val($(this).text());
                $(this).attr("selected", true);
                $("#selectItem").blur();
            } else {
                $(this).removeAttr("selected");
            }
            count++;
        });
    }
});

 當select是動態生成的時候，綁定事件不生效，可使用事件冒泡實現事件綁定

$("body").delegate("#selectItem", "focus", function() {
    this.size = this.children.length;
}).delegate("#selectItem", "blur", function() {
    this.size = 1;
}).delegate("#selectItem option", "click", function() {
    $("#selectItem option").each(function() {
        $(this).removeAttr("selected");
    });
    $(this).attr("selected", true);
    $("#selectItem").blur();
});

$(document).keydown(function(event) {
    var key = event.which; // 獲取按鍵的ascii碼
    var num = key - 48; // 獲取對應的數字
    if (num >= 1 && num <= 4) { // 只有4個下拉框，只處理1-4
        var count = 1; // 計數
        $("#selectItem option").each(function() {
            if (count == num) {
                $("#selectItem").val($(this).text());
                $(this).attr("selected", true);
                $("#selectItem").blur();
            } else {
                $(this).removeAttr("selected");
            }
            count++;
        });
    }
});