Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dar de alta a clientes</title>
<style type="text/css">
<!--
.Estilo1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
body,td,th {
font-family: Calibri;
font-size: 16px;
}
-->
</style>
<script type="text/javascript">
//defino una serie de varibles Array para cada país
var provincias_1=new Array("Seleccione...","Bella Vista","Empedrado","Esquina")
var provincias_2=new Array("Seleccione...","Florencia","Las Toscas")
//función que cambia las provincias del select de provincias en función del país que se haya escogido en el select de país.
function cambia_loc(){
//tomo el valor del select del pais elegido
var prov
prov = document.f1.provincias[document.f1.provincias.selectedIndex].value
//miro a ver si el pais está definido
if (prov != 0) {
//si estaba definido, entonces coloco las opciones de la provincia correspondiente.
//selecciono el array de provincia adecuado
mis_provincias=eval("provincias_" + prov)
//calculo el numero de provincias
num_provincias = mis_provincias.length
//marco el número de provincias en el select
document.f1.localidad.length = num_provincias
//para cada provincia del array, la introduzco en el select
for(i=0;i<num_provincias;i++){
document.f1.localidad.options[i].value=mis_provincias[i]
document.f1.localidad.options[i].text=mis_provincias[i]
}
}else{
//si no había provincia seleccionada, elimino las provincias del select
document.f1.localidad.length = 1
//coloco un guión en la única opción que he dejado
document.f1.localidad.options[0].value = "-"
document.f1.localidad.options[0].text = "-"
}
//marco como seleccionada la opción primera de provincia
document.f1.localidad.options[0].selected = true
}
</script>
</head>
<body>
<div align="center" class="Estilo1">
<form id="f1" name="f1" method="post" action="clientes2.php">
<table width="550" border="0" cellpadding="0" cellspacing="3">
<tr>
<td width="181" align="right">Nombre:</td>
<td width="360"><input name="nombre" type="text" id="nombre" size="30" /></td>
</tr>
<tr>
<td align="right">Provincia:</td>
<td>
<select name="provincias" onchange="cambia_loc()">
<option value="0" selected="selected">Seleccione...</option>
<option value="1">Corrientes</option>
<option value="2">Santa Fe</option>
</select> </td>
</tr>
<tr>
<td align="right">Localidad</td>
<td>
<select name="localidad">
<option value="-">Seleccione la Provincia</option>
</select>
</td>
</tr>
<tr>
<td align="right" valign="top">Categoría del Servicio:</td>
<td>
<select name="localidad">
<option value="0" selected="selected">Seleccione...</option>
<option value="1">Excursiones de Pesca</option> </select> </td>
</tr>
<tr>
<td align="right">Direccion:</td>
<td><input name="direccion" type="text" id="direccion" value="-" size="30" /></td>
</tr>
<tr>
<td align="right">Telefono:</td>
<td><p>
<input name="telefono" type="text" id="telefono" value="-" size="30" />
</p> </td>
</tr>
<tr>
<td align="right">Email:</td>
<td><input name="email" type="text" id="email" value="0" size="30" /></td>
</tr>
<tr>
<td align="right">Web:</td>
<td><input name="web" type="text" id="web" value="0" size="30" /></td>
</tr>
<tr>
<td align="right">
<input type="submit" name="Submit" value="Enviar" /></td>
<td><input type="reset" name="Submit2" value="Restablecer" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>