Cargar un select, dependiendo de otro

[CJaramillo]

Buenos Días


Como el título lo dice, busco llenar un select dependiendo de la selección que se haya hecho en otro select anterior.

Bueno he desarrollado el siguiente código:

Form:

Código HTML:

<form class="bootstrap-frm" name="f1" action="registro.php" method="POST" enctype="multipart/form-data" onsubmit="return comprobar(this)">
		<table>
		<tr >
			<h1>Formulario de Registro de Funcionarios</h1>
		</tr>
		<tr>
			<td></td>			
			<td class="FormLabel" align="center">
				<strong><label>Datos Personales</label></strong>
			</td>
		</tr>
		<tr><td></td><td><hr width=355></td></tr>				
		<tr>
			<td class="FormLabel">
				<label>Nombres</label>
			</td>
			<td>
				<input required type="text" title="Solo se Permiten Letras Mayusculas o Minusculas de la A a la Z,
 maximo 50 caracteres." required pattern="[a-zA-Z\s]{1,50}" name="name">
			</td>
		</tr>
		<tr>
			<td class="FormLabel">
				<label>Apellidos</label>
			</td>
			<td class="FormFieldContent">
				<input title="Solo se Permiten Letras Mayusculas o Minusculas de la A a la Z,
 maximo 50 caracteres." required pattern="[a-zA-Z\s]{1,50}" type="text" name="surname">
			</td>
		</tr>		
		<tr>
			<td>
				<label>Tipo de Documento</label>
			</td>
			<td>
				<select required name="ofi1">					
					<option value="01">Cédula de Ciudadanía</option>
					<option value="02">Cédula de Extranjería</option>
					<option value="03">Tarjeta de Identidad</option>
					<option value="04">Pasaporte</option>
					<option value="05">Otro</option>
				</select>
			</td>
		</tr> 
		<tr>
			<td class="FormLabel">
				<label>Documento</label>
			</td>
			<td class="FormFieldContent">
				<input title="El documento debe tener maximo 32 caracteres." required pattern="{1,32}" type="text" name="doc">
			</td>
		</tr>
		<tr>
			<td class="FormLabel">
				<label>Correo Electrónico</label>
			</td>
			<td class="FormFieldContent">
				<input required pattern="[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+){1,100}" title="El email debe tener este formato: [email protected],
 maximo 100 caracteres." type="email" name="email" placeholder="Ingrese su email.">
			</td>
		</tr>
		<tr>
			<td></td>			
			<td class="FormLabel" align="center">
				<strong><label>Estructura Administrativa</label></strong>
			</td>
		</tr>
		<tr><td></td><td><hr width=355></td></tr>		
		<tr>
			<td class="FormLabel">
				<label>Seleccione</label>
			</td>
			<td class="FormFieldContent">
				<select required name="rango" onchange='cargarSelect2();'>
					<option value="0">-</option> <?php
					$con = mysql_connect($host,$user_db,$pw);
					mysql_select_db($db,$con);
					$registro = mysql_query("SELECT DISTINCT cod_ran,rango_dep FROM ESTRUCTURA",$con);
					while($reg=mysql_fetch_array($registro)){?>
						<option value=" <?php echo $reg['cod_ran']; ?> "> <?php echo utf8_encode($reg['rango_dep']); ?> </option> <?php 
					} ?>					
				</select>
			</td>
		</tr>
		<tr>
			<td class="FormLabel">
				<label>Seleccione</label>
			</td>
			<td class="FormFieldContent">
				<div id="states_container"></div>
			</td>
		</tr>
		<tr><td></td><td><hr width=355></td></tr>		
		<tr>
			<td class="FormLabel">
				<label>Contraseña</label>
			</td>
			<td class="FormFieldContent">
				<input required title="La contraseña debe tener minimo 5 caracteres y maximo 32." pattern="{5,20}" type="password" name="password">
			</td>
		</tr>
		<tr>
			<td class="FormLabel">
				<label>Confirme la contraseña</label>
			</td>
			<td class="FormFieldContent">
				<input required title="La contraseña debe tener minimo 5 caracteres y maximo 32." pattern="{5,20}" type="password" name="password2">
			</td>
		</tr>
		
	</table>
	<div align="right">		
	<input class="button" style="cursor:pointer;" type="submit" value="Crear Usuario">
	</div>
	</form> 

Función JavaScript:

Código HTML:

<script type="text/javascript">
	
		function cargarSelect2(){
            
            var formName = 'f1'; 
            var dat = document[formName]['rango'].value;
            
            var xmlhttp = null;
            if(typeof XMLHttpRequest != 'udefined'){
                xmlhttp = new XMLHttpRequest();
            }else if(typeof ActiveXObject != 'undefined'){
                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
            }else 
                throw new Error('El navegador no soporta AJAX');
                
            xmlhttp.open('GET', 'llena_select2.php?dat='+dat, true);
            xmlhttp.onreadystatechange = function (){
                if(xmlhttp.readyState == 4)
                    insertStates(xmlhttp);
            };
            xmlhttp.send(null);
        }

        function insertStates(xhr){
            if(xhr.status == 200){
                document.f1.getElementById('states_container').innerHTML = xhr.responseText;
            }else 
                throw new Error('El servidor ha encontrado un error\n'+
                                 'Codigo de Error = '+xhr.status);
        }
	</script> 

Archivo PHP(llena_select2.php):

Código HTML:

<?php 
	
	include("conexion.php");
	//$valor = strip_tags(addslashes($_REQUEST['q']));
	$c = $_GET['dat'];
	$con = mysql_connect($host,$user_db,$pw);
	mysql_select_db($db,$con);
	$registro = mysql_query("SELECT id,dep FROM  ESTRUCTURA WHERE  cod_ran = '$c'",$con) or die(mysql_error());
	
	if(isset($_GET['dat'])) 
        {
            $states = '';            
            while($row = mysql_fetch_assoc($registro))
            {
                $states .= '<option value="'.$row['id'].'">'.$row['dep'].'</option> <br>';                 
            }
            if($states == '')
                echo '';
            else 
                echo '<select name="rango2"><option disabled>-</option>'.$states.'</select>';
            
        }
 ?> 

El problema es que no logro que aparezca el segundo select. No se en que me estoy equivocando, agradezco su ayuda.