在沒有 JQuery 的情況下檢查 select 元素中是否存在選項？

Question

不幸的是，我無權訪問 JQuery，而且這一切都很好。 但我確實可以訪問 JavaScript。 如何檢查 HTML 選擇中是否存在 OPTION？

編輯：為了澄清，我需要知道是否存在選項。 例如：

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

我檢查“現代”是否是一個選項，它不是。

Answer 1

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

將在您的選擇中選擇第一個選項。 如果失敗，您就知道您的選擇中沒有選項。 如果您通過在.options[0]之后附加.value獲取數據，則它不為空。 如果沒有 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' ) );

Answer 4

我正在尋找比我更好的解決方案：

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

Answer 5

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

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

Answer 6

因為如果選擇當前不存在，我將向該選擇添加一個選項，所以我只需將選擇的值設置為要檢查是否存在的項目，然后讀取該元素的 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 7

檢查value屬性

使用HTMLOptionElement對象上的value屬性檢查是否存在具有指定 value 屬性的選項。 請注意，如果未提供此類屬性，則選項的值將回退到其文本內容。

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

基於Miguel Pynto 的回答

檢查<option>顯示文本

要檢查是否存在帶有指定顯示文本的選項，而不管其value屬性如何，請使用HTMLOptionElement對象上的text屬性。 這兩個片段之間的唯一區別是第二行的結尾。

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

基於這個答案