检查没有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

我知道已经有了一个选定的答案，但是对于其他人来自搜索，我相信可以通过例如缓存“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' ) );

Answer 3

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

我遍历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 4

因为我要在select中添加一个选项，如果它当前不存在，我只需将Select的值设置为我想要检查的项目，然后读取元素的selectedIndex属性。如果它为-1，则该选项当前不存在于控件中。

<select id="mySelect">
 <option>Apple</option>
 <option>Orange</option>
 <option>Pineapple</option>
 <option>Banana</option>
</select>

<script>
function myFunction() {
 document.getElementById("mySelect").value = "Banana";
 alert(document.getElementById("mySelect").selectedIndex);
 //yields 3
 document.getElementById("mySelect").value = "Strawberry";
 alert(document.getElementById("mySelect").selectedIndex);
 //yields -1
}
</script>

Answer 5

检查 value 属性

使用 HTMLOptionElement 对象上的 value 属性检查是否存在具有指定值属性的选项。请注意，如果未提供此类属性，则选项的值将回退到其文本内容。

const select = document.querySelector("select");
const optionLabels = Array.from(select.options).map((opt) => opt.value);
const hasOption = optionLabels.includes("Hyndai");

基于Miguel Pynto's answer

检查 <option> 显示文本

要检查是否存在带有指定显示文本的选项，无论其 value 属性如何，请使用 HTMLOptionElement 对象上的 text 属性。这两个片段之间的唯一区别是第二行的结尾。

const select = document.querySelector("select");
const optionLabels = Array.from(select.options).map((opt) => opt.text);
const hasOption = optionLabels.includes("Hyndai");

Based on this answer

Answer 6

另一种可能性是利用Array.prototype.find：

  /**
   * @param {HTMLSelectElement} selectElement
   * @param {string} optionValue
   * @return {boolean}
   */
  function optionExists(selectElement, optionValue) {
      return !!Array.prototype.find.call(selectField.options, function(option) {
          return option.value === optionValue;
      }
  )

Answer 7

我在寻找比我更好的解决方案：

[...document.querySelector("select").options].map(o => o.value).includes("Hyndai")