Un select es una lista desplegable de opciones de HTML, se declara usando <select> y dentro de él tiene opciones declaradas con <option>. Cada opción tiene un valor y un texto. El select de HTML se maneja a través de JavaScript. Al select también se le conoce como lista desplegable, Dropdown list o simplemente select.

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>
Cambie el SELECT para ver la opción <b>onChange</b> <select id="select1" onChange="cambiarColor()">
<option value="">Cambie</option>
<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>

Ver ejemplo anterior

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:

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.