代码之家 › 专栏 › 技术社区 › bristows

迭代selectlist以高亮显示一个项目,然后依次高亮显示每个项目

jquery

bristows · 技术社区 · 15 年前

我有下面的jQuery方法,它遍历包含许多选项的selectlist。我想将与用户键入的某些文本匹配的第一行高亮显示到名为MMDCriteria的文本框中。当前代码依次选择并突出显示每个项,直到它到达列表的末尾。

$("#MMDCriteria").bind('keypress', function(e) {
            var code = (e.keyCode ? e.keyCode : e.which);

            if(code == 13) { //Enter keycode                
                var criteria = $(this).val().toUpperCase();
                alert("");                
                $('select#MMD > option').each(function() {
                    var optionValue = $(this).text().toUpperCase();

                    alert(optionValue.substring(0, optionValue.indexOf(criteria)));

                    if(optionValue.substring(0, optionValue.indexOf(criteria)) > -1) {
                        $(this).attr('selected', 'selected');
                    }
                });
            }            
        });

我刚刚开始使用jQuery,请原谅我的冗长。

1 回复 | 直到 15 年前

Anurag 15 年前

它突出显示了多个选项,因为 each false . 将代码大致修改为:

..
var notFound = true; // 1) initialize a shared variable

$('select#MMD > option').each(function() {
    ..
    if(found a match) {
        ..
        notFound = false; // 2) update it's value to force exit from loop
    }
    return notFound; // 3) keep iterating until notFound is true
});
..

或者,使用一个简单的for循环来保持逻辑清晰。

...
var options = $('#MMD > option');
for(var i = 0; i < options; i++) {
    if found a match {
        add "selected" attribute
        return; // exists the `keypress` function immediately
    }   
}
..

而且,jQuery已经规范化了 event 对象,这样就不必检查 keyCode 或 which .