JQueryを使用しないselect要素にオプションが存在するかどうかを確認しますか？

Question

残念ながら私はJQueryにアクセスすることはできません。しかし私はJavaScriptにアクセスできます。オプションがHTML Selectに存在するかどうかを確認するにはどうすればよいですか？

EDIT：明確にするために、オプションが存在するかどうかを知る必要があります。したがって、たとえば：

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

「Hyndai」がOPTIONであるかどうかをチェックします。

Answer 1

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

あなたの選択で最初のオプションを選択します。それが失敗した場合、あなたの選択にオプションがないことがわかります。 .options[0]の後に.valueを追加してデータを取得した場合、それは空ではありません。 javascriptがなければ、これを達成することはできません。 HTMLだけがあなたが望む機能を提供しません。

私が選んだ答えは既に存在であることを理解が、検索から、ここで取得し、他の人のために、私は受け入れ答えは、例えば「MySelectと」の選択をキャッシュすることで、改善することができると信じています。

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

Answer 2

/** 
* 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

別の可能性は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 5

私はオプションを追加するつもりですので現在選択されていない場合は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>