problema para tomar valor del select

Question

Les escribo por problemas con un select, que aunque se que han solventado bastantes dudas con respecto a este tema, no he encontrado nada en internet que me ayudara.

 function desplegar(){
    var valor = document.getElementById(desplegar);
    var texto = valor.options[valor.selectedIndex].text;
    alert(texto); 
 }

<select id=“desplegar” onchange=desplegar()>
  <optgroup label=“a”>
    <option>b</option>
    <option>c</option>
  </optgroup>
  <optgroup label=“d”>
    <option>e</option>
    <option>f</option>
  </optgroup>
</select>

Esta ha sido una opción muy simple pero que muchos usan, donde se supone debería tomar lo guardado en el id "desplegar" y luego obtener el texto de la opción seleccionada he imprimirlo en forma de alert, pero la linea var texto = valor.options[valor.selectedIndex].text; indica lo siguiente:

null is not an object (evaluating 'valor.options'

También he alternado entre otras opciones pero no me acepta parámetros como options, selectedIndex y otros relacionados
Les agradezco por su servicio.

html javascript select

Nicolas Oñate · Answer

Si lo que deseas es obtener el texto del option seleccionado puedes hacerlo de la siguiente manera:

function desplegar(){
    var valor = document.querySelector('select[id=“desplegar”] option:checked').text;
   alert(valor);
 }

<select id=“desplegar” onchange=desplegar()>
  <optgroup label=“a”>
    <option>b</option>
    <option>c</option>
  </optgroup>
  <optgroup label=“d”>
    <option>e</option>
    <option>f</option>
  </optgroup>
</select>

Con document.querySelector() y dentro del selector apuntas al select y después a la opción seleccionada solventas el problema de null aparte de ser mas eficiente al usar solo una variable.

problema para tomar valor del select

One Answer

Add your own answers!

Ask a Question