Este otro objeto visual que podemos disponer en un FORM permite realizar la selección de un string de una lista y tener asociado al mismo un valor no visible. El objetivo fundamental en JavaScript es determinar qué elemento está seleccionado y qué valor tiene asociado. Esto lo hacemos cuando ocurre el evento onChange.

Para determinar la posición del índice seleccionado en la lista:

  document.getElementById('select1').selectedIndex;

Considerando que el objeto SELECT se llama select1 accedemos a la propiedad selectedIndex (almacena la posición del string seleccionado de la lista, numerando a partir de cero)

Para determinar el string seleccionado:

  document.getElementById('select1').options[document.getElementById('select1').selectedIndex].text;

Es decir que el objeto select1 tiene otra propiedad llamada options, a la que accedemos por medio de un subíndice, al string de una determinada posición.

Hay problemas en los que solamente necesitaremos el string almacenado en el objeto SELECT y no el valor asociado (no es obligatorio asociar un valor a cada string).

Y por último con esta expresión accedemos al valor asociado al string:

  document.getElementById('select1').options[document.getElementById('select1').selectedIndex].value;

Un ejemplo completo que muestra el empleo de un control SELECT es:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
function cambiarColor()
{
  var seleccion=document.getElementById('select1');
  document.getElementById('text1').value=seleccion.selectedIndex;
  document.getElementById('text2').value=seleccion.options[seleccion.selectedIndex].text;
  document.getElementById('text3').value=seleccion.options[seleccion.selectedIndex].value;
}
</script>

<form>
  <select id="select1" onChange="cambiarColor()">
    <option value="ff0000">Rojo</option>
    <option value="00ff00">Verde</option>
    <option value="0000ff">Azul</option>
  </select>
  <br>
  Número de índice seleccionado del objeto SELECT:<input type="text" id="text1"><br>
  Texto seleccionado:<input type="text" id="text2"><br>
  Valor asociado:<input type="text" id="text3"><br>
</form>
</body>
</html>

Se debe analizar en profundidad este problema para comprender primeramente la creación del objeto SELECT en HTML, y cómo acceder luego a sus valores desde Javascript.

Es importante para el objeto SELECT definir qué función llamar cuando ocurra un cambio: onChange="cambiarColor()".

Por cada opción del objeto SELECT tenemos una línea:

    <option value="ff0000">Rojo</option>

Donde Rojo es el string que se visualiza en el objeto SELECT y value es el valor asociado a dicho string.

Analizando la función cambiarColor() podemos ver cómo obtenemos los valores fundamentales del objeto SELECT.

Retornar