Compruebe si existe una opción en el elemento seleccionado sin JQuery?

Question

Por desgracia, no tienen acceso a jQuery y todas sus sutilezas. Pero tengo acceso a JavaScript. ¿Cómo puedo verificar si existe una OPCIÓN en un HTML Select?

EDIT: Para aclarar, necesito saber si existe una opción. Así por ejemplo:

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

Compruebo si "Hyndai" es una OPCIÓN, y no lo es.

Answer 1

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

seleccionaría la primera opción en su selección. Si falla, sabe que no hay opciones en su selección. Si obtiene datos al agregar .value después de .options[0], no está vacío. Sin javascript no podrás lograr esto. Solo HTML no ofrece la funcionalidad que desea.

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

Answer 2

entiendo que ya hay una respuesta elegida, pero para otras personas que reciben aquí desde la búsqueda, creo que la respuesta aceptada se puede mejorar, por ejemplo, el almacenamiento en caché de la selección de 'MySELECT'.

Creo envolver la lógica en una función reutilizable y pasándole la opción que busca y el objeto tendría sentido:

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

Uso:

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

Answer 3

me encontré con este problema hoy y usé estas respuestas para crear las mías, que creo que es un poco más fácil de usar.

Me desplazo por las opciones de select (almacenamiento en caché de la longitud), pero puse ese bucle en el HTMLSelectElement a través de su prototipo, como una función .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; 

} 

Luego de usarlo, simplemente escribo esto:

if (select.contains(value)) { 

Answer 4

Otra posibilidad sería utilizar 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

porque voy a añadir una opción para el seleccione si no existe actualmente, simplemente configuro el valor de Select para el elemento que deseo verificar y luego leo la propiedad selectedIndex del elemento. Si es -1, entonces la opción no existe actualmente en el control.

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