时间戳

首页 > 解决方案 > 如何使用 vanilla JS 检查选择框中是否存在值？

javascript - 如何使用 vanilla JS 检查选择框中是否存在值？

问题描述

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

我在这里做一些简单的事情，但我无法弄清楚。感谢您的任何帮助。

工作代码笔：

代码笔

JavaScript：

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

function checkOption(check) {
    options.forEach((o) => {
        if (o.value === check) {
            return true; // returns undefined either way.
        }
    });
}
}

编辑：我现在可以console.log()打印到控制台，但我试图返回Trueor False。我将如何修改上述函数以返回True或False？到目前为止，这只返回undefined.

标签： javascript

解决方案

您需要options在函数中循环。您还可以通过forEach在集合上使用来缩短：

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

filter()您还可以通过使用数组函数来压缩更多。您只需要将选项NodeList视为一个数组，但首先将其粘贴到Array.from()方法中：

function checkOption(check) {
   if( Array.from(options).filter( o => o.value === check ).length )
      alert(`${check} is available`);
}

甚至更短，让函数返回 true 或 false 以指示给定选项值的存在。

function checkOption(check) {
   return Array.from(options).filter( o => o.value === check ).length > 0;
}

推荐阅读