Question

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

HTML：

MSTest

JS：

<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">

Answer 1

你只看到最后一个的原因是因为你永远不会突破每个循环。找到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();
});

Answer 2

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

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

Answer 3

那是因为

$('#select option').each

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

您看到最后一项有效，因为最后一项覆盖了所有其他项目。

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

3 个答案: