2010-12-01 26 views
11

tengoseleccione <select> elemento con valor

<select id="x"> 
    <option value="5">hi</option> 
    <option value="7">hi 2</option> 
</select> 

Quiero una función de JavaScript que me permite seleccionar y mostrar la <option> como viene por defecto por id. En otras palabras, quiero hacer un setOption(5) y el <option> con el valor "5" para mostrarse en el cuadro combinado de forma predeterminada.

¿Es esto posible?

+0

Y lo ha intentado? –

+0

no necesita ni siquiera javascript para esto. ¿Hay alguna razón por la que deba haber terminado en el lado del cliente? – fifigyuri

+3

@fifigyuri - ¿Por qué no? Puedo pensar en varias razones por las cuales esto puede ser útil. Por cierto, si jQuery es una opción, es tan simple como '$ ('# x'). Val ('5');'. – Kobi

Respuesta

17

Si usted puede, con ES6 ...

function setOption(selectElement, value) { 
    return [...selectElement.options].some((option, index) => { 
     if (option.value == value) { 
      selectElement.selectedIndex = index; 
      return true; 
     } 
    }); 
} 

... de lo contrario ...

function setOption(selectElement, value) { 
    var options = selectElement.options; 
    for (var i = 0, optionsLength = options.length; i < optionsLength; i++) { 
     if (options[i].value == value) { 
      selectElement.selectedIndex = i; 
      return true; 
     } 
    } 
    return false; 
} 

setOption(document.getElementById('my-select'), 'b'); 

See it!

Si devuelve false, entonces el valor no se pudo encontrar :)

+0

Gracias, pequeña corrección 'for (var i = 0; i

+1

@Ronan Dejhero ¿Esa corrección no es necesaria? – alex

+0

no es no, simplemente no tener bits adicionales en el código: p –

-2

No debería ser necesario incluso javascript para participar, simplemente usar el atributo selected:

<select id="x"> 
    <option value="5" selected>hi</option> 
    <option value="7">hi 2</option> 
</select> 
+0

En realidad, pedí un código de JavaScript para poder editar el objeto que tiene ese "seleccionado" attrib –

+1

@Ronan, sí; pero ese es el punto que estaba haciendo @fifigyuri: ** a menos que ** esto se haga en ** respuesta a las acciones del usuario ** en el lado del cliente hay ** una razón pequeña ** para usar una función de JavaScript para lograr esto. –

1

Si está utilizando jQuery (1.6 o superior)

$('#x option[value="5"]').prop('selected', true) 
+0

Cuando intento $ ('# x option [value = "5"]') en js-console con mi valor (visible desde la inspección del elemento), no encuentra la opción. Si uso $ ('# x'), lo hace. Todo usando la ID del elemento de mi página, por supuesto. – JosephK

+0

He respondido a la pregunta, la pregunta original se le preguntó "seleccione