检查没有JQuery的select元素中是否存在选项？

Question

不幸的是,我无法访问JQuery,而且一切都很精确.但我确实可以访问JavaScript.如何检查HTML Select中是否存在OPTION？

编辑:澄清一下,我需要知道是否存在选项.例如:

<select>
 <option>Volvo</option>
 <option>Saab</option>
 <option>Mercedes</option>
 <option>Audi</option>
</select>

我检查"Hyndai"是否是一个选项,但事实并非如此.

Answer 1

document.getElementById("myselect").options[0] //accesses first option via options[]

会选择你选择的第一个选项.如果失败,您就会知道您的选择中没有选项.如果您通过.value在数据.options[0]不为空之后附加数据来获取数据.没有JavaScript,你将无法实现这一目标.只有HTML不能提供您想要的功能.

for (i = 0; i < document.getElementById("myselect").length; ++i){
    if (document.getElementById("myselect").options[i].value == "Hyndai"){
      alert("Hyndai is available");
    }
}

Answer 2

我今天遇到了这个问题，并使用这些答案提出了我自己的答案，我认为它更容易使用。

我遍历select的选项（缓存长度），但我通过它的原型将该循环放入 HTMLSelectElement 本身，作为一个.contains()函数。

HTMLSelectElement.prototype.contains = function( value ) {

    for ( var i = 0, l = this.options.length; i < l; i++ ) {

        if ( this.options[i].value == value ) {

            return true;

        }

    }

    return false;

}

然后要使用它，我只是这样写：

if ( select.contains( value ) ) {

Answer 3

我知道已经有一个选择的答案，但对于从搜索到这里的其他人，我相信可以改进接受的答案，例如缓存“myselect”的选择。

我认为将逻辑包装在一个可重用的函数中并将其传递给您正在寻找的选项和对象将是有意义的：

/**
 * Return if a particular option exists in a <select> object
 * @param {String} needle A string representing the option you are looking for
 * @param {Object} haystack A Select object
*/
function optionExists ( needle, haystack )
{
    var optionExists = false,
        optionsLength = haystack.length;

    while ( optionsLength-- )
    {
        if ( haystack.options[ optionsLength ].value === needle )
        {
            optionExists = true;
            break;
        }
    }
    return optionExists;
}

用法：

optionExists( 'searchedOption', document.getElementById( 'myselect' ) );