Selección de un elemento de opción en un menú desplegable por su valor de texto

Question

Dado un elemento de formulario HTML como:

<select id='mydropdown'> 
    <option value='foo'>Spam</option> 
    <option value='bar'>Eggs</option> 
</select> 

Sé que puedo seleccionar la primera opción con

document.getElementById("mydropdown").value='foo' 

Sin embargo, decir que tengo una variable con el valor "Spam"; ¿Puedo seleccionar un elemento desplegable por su texto en lugar de su valor?

Answer 1

var desiredValue = "eggs" 
var el = document.getElementById("mydropdown"); 
for(var i=0; i<el.options.length; i++) { 
    if (el.options[i].text == desiredValue) { 
    el.selectedIndex = i; 
    break; 
    } 
} 

Answer 2

Utilizaría el selectedIndex o un bucle para seleccionar la opción por texto, el código siguiente no funciona.

document.getElementById("mydropdown").text = 'Eggs'; 

Answer 3

Si desea obtener una opción por su InnerText y no por el valor que puede hacer esto:

function go(){ 
    var dropdown = document.getElementById('mydropdown'); 
    var textSelected = 'Spam'; 

    for(var i=0, max=dropdown.children.length; i<max; i++) { 
     if(textSelected == dropdown.children[i].innerHTML){ 
      alert(textSelected); 
      return; 
     } 
    } 
} 

Answer 4

antigua IE no maneja las opciones de un selecto como nodos secundarios, pero todos los navegadores implementan la propiedad de texto de la colección de opciones de un selecto.

function selectbytext(sel, txt){ 
    if(typeof sel== 'string'){ 
     sel= document.getELementById(sel) || document.getELementsByName(sel)[0]; 
    } 
    var opts= sel.options; 
    for(var i= 0, L= opts.length; i<L; i++){ 
     if(opts[i].text== txt){ 
      sel.selectedIndex= i; 
      break; 
     } 
    } 
    return i; 
}