11 - Formulario HTML (control select - con selección múltiple)


Veamos una variante del control select la cual permite seleccionar varias opciones de su contenido. Para esto debemos agregar la propiedad multiple cuando lo definimos:

<select name="operacion" multiple>

Con este simple cambio podemos seleccionar más de un elemento del interior del control select.

Confeccionaremos el mismo problema anterior, solo que ahora podremos seleccionar las dos operaciones en forma simultanea

El archivo HTML ahora queda codificado de la siguiente manera:

pagina1.html

<html>
<head>
<title>Problema</title>
</head>
<body>
<form action="pagina1.asp" method="post">
Ingrese primer valor:
<input type="text" name="valor1">
<br>
Ingrese segundo valor:
<input type="text" name="valor2">
<br>
<select name="operacion" multiple>
<option value="suma">Sumar</option>
<option value="resta">Restar</option>
</select>
<br>
<input type="submit" value="operar">
</form>
</body>
</html>

El único cambio es el agregado de la propiedad multiple al elemento select. Esta propiedad no requiere que se le asigne un valor.

Cuando ejecutamos la página para la selección múltiple debemos presionar la tecla Ctrl y con el mouse seleccionar la opción, esto lo repetimos por cada elemento del select que queremos que quede seleccionada.

En cuanto al programa ASP que procesa los datos del formulario es:

pagina1.asp

<%option explicit%>
<html>
<head>
<title>problema</title>
</head>
<body>
<%
dim v1,v2,suma,operaciones,resta
v1=request.form("valor1")
v2=request.form("valor2")
operaciones=request.form("operacion")
if (instr(operaciones,"suma")<>0) then
  suma=cint(v1)+cint(v2)
  response.write("la suma de los dos valores es:")
  response.write(suma)
  response.write("<br>")
end if
if (instr(operaciones,"resta")<>0) then
  resta=cint(v1)-cint(v2)
  response.write("la diferencia de los dos valores es:")
  response.write(resta)
end if
%>
</body>
</html>

Ahora cuando rescatamos el contenido del control select:

operaciones=request.form("operacion")

se almacena en la variable operación todos los contenidos de las propiedades value de las opciones seleccionadas. Cada valor está separado por una coma.

Esta forma de retornar todos los valores nos complica en el momento de verificar cual de las opciones está seleccionada.

Una forma de verificar si una de las opciones está seleccionada es empleando la función intstr.
Esta función tiene dos parámetros, el primero recibe la cadena completa a analizar y el segundo la cadena a buscar. Si esta función retorna un valor distinto a cero significa que se encuentra la cadena a buscar.

Entonces tenemos:

if (instr(operaciones,"suma")<>0) then

Si el string "suma" se encuentra almacenada en alguna parte de la variable operación la función instr retorna un valor distinto a cero por lo que la condición del if se verifica verdadera y procedemos a efectuar la suma de los dos valores.


Retornar