检查下拉选项并在输入文本框中键入内容时执行某些操作答案

【问题标题】：Check dropdown options and do something while typing in input text box检查下拉选项并在输入文本框中键入内容时执行某些操作
【发布时间】：2015-11-11 00:14:03
【问题描述】：

这个功能有问题。我只能使它适用于选择框中的最后一个下拉选项。换句话说，如果我在选择框中键入最后一个选项的文本，它只会做它应该做的事情。它不承认我输入了其他选项。我在每个循环中都会发出警报，它会向我显示所有选项，并且我还会提醒我输入的内容。它应该适用于所有选项，但事实并非如此。试图在文本输入框中添加或删除类。如果我键入选项之一，则添加错误类。如果我更改了我输入的内容并且它与任何选项都不匹配，请删除错误类。

HTML：

<select id="select" class="select selectpicker input-block-level" name="select">
    <option value="">pick a thing</option>
    <option value="0.00">#1 thing</option>
    <option value="0.01">1x1 thing</option>
    <option value="0.02">some thing</option>
    <option value="0.03">something</option>
    <option value="0.04">thing</option>
</select>

<input id="text" class="span12" type="text" placeholder="type a thing" value="" name="text">

JS：

function getValue() {
    var theValue = $('#text').val();
    //alert(theValue);

    //begin tried and failed stuff
    //var exists = 0 != $('#select option[text='+thevalue+']').length;
    //if($('#select option[text='+thevalue+']').length > 0)
    //if(exists == true)
    //{
        //alert("exists");
        //$("#text").addClass("error");
    //} else {
        //$("#text").removeClass("error");
    //}
    //end tried and failed stuff

    $('#select option').each(function(){
        var theDropValue = this.text.toLowerCase();
        //alert (theDropValue);
        var theNewValue = theValue.toLowerCase();
        if (theDropValue == theNewValue) {
            //exists = true;
            $("#text").addClass("error");
        } else {
            $("#text").removeClass("error");
        }
    });
}

$(document.body).on( "change keyup input", "#text", function() {
    getValue();
});

【问题讨论】：

标签： jquery

【解决方案1】：

您只看到最后一个的原因是因为您永远不会跳出 each 循环。找到所需的值后，return false; 将停止检查循环中的其他值。

小提琴：http://jsfiddle.net/3swv31px/

function getValue() {
    var theValue = $('#text').val();
    $('#select option').each(function () {
        var theDropValue = this.text.toLowerCase();
        //alert (theDropValue);
        var theNewValue = theValue.toLowerCase();
        if (theDropValue == theNewValue) {
            //exists = true;
            $("#text").addClass("error");
            return false;
        } else {
            $("#text").removeClass("error");
        }
    });
}

$(document.body).on("change keyup input", "#text", function () {
    getValue();
});

【讨论】：

【解决方案2】：

在for循环中，如果值存在，则添加error类并返回

            if (theDropValue == theNewValue) {
                //exists = true;
                $("#text").addClass("error");
                return; // add this line
            } else {
                $("#text").removeClass("error");
            }

【讨论】：

return 不会跳出每个循环。您必须返回 false。 return 只会返回 undefined。

【解决方案3】：

那是因为

$('#select option').each

循环对象中的所有项目，每次只有 1 个输出覆盖。

您只看到最后一项工作，因为最后一项覆盖了所有其他项。

【讨论】：