如何使用香草JS检查选择框中是否存在值？

Question

我想创建一个接受check参数的函数，该函数将循环显示选择框的选项和值，并检查该值是否存在。我有它的工作（有点），但它只检查第一个选项。如果运行checkOption('red)，则会收到有关“选项已存在”的警报。但是，如果您运行checkOption('green')，则不会发生任何事情。

我在这里做一些简单的事情，但是我无法弄清楚。感谢您提供的所有帮助。

工作代码笔：

CodePen

JavaScript：

let selectBox = document.querySelector("select");
let options = selectBox.querySelectorAll("option");

function checkOption(check) {
    for (i = 0; i < selectBox.length; ++i) {
        if (selectBox.options[i].value === check) {
            alert(`${check} is available`);
        }
        return;
    }
}

Answer 1

您应在循环中使用options.length。除此之外，最好在使用变量之前先定义变量。

让selectBox = document.querySelector（“ select”）;let options = selectBox.querySelectorAll（“ option”）;

function checkOption(check) {
    for (var i = 0; i < options.length; ++i) {
        if (selectBox.options[i].value === check) {
            alert(`${check} is available`);
        }
        return;
    }
}

Answer 2

您需要遍历函数中的options。您也可以通过使用集合上的forEach来缩短：

function checkOption(check) {
    options.forEach( o => {
        if( o.value === check) {
            alert(`${check} is available`);
        }
        return;
    }
}