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

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

jquery

bristows · 技术社区 · 14 年前

我有下面的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 回复 | 直到 14 年前

Anurag 14 年前

它突出显示了多个选项,因为 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 .

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前