Dependent selects 2 levels


I need your help: (

I have a problem with the dependent dropdown in 2 levels, one is for country, the other for city. The problem is that when I click a country, in the dropdown of the city I get stuck inside the whole whole html page and I can not see where it fails ... I hope you can help me ...

Here is the code:

// JavaScript Document
var  conexion = null;

function crearXMLHttpRequest() {
	var xmlhttp=false;
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
	return xmlhttp; 

//declaramos los dropdowns del documento HTML
var listadoSelects = new Array();
listadoSelects[0] = "pais";
listadoSelects[1] = "ciudad";

/*funcion que devuelve la posicion donde esta el elemento dentro del array*/
function buscar(array, valor){
	var i = 0;
		if(array[i] == valor){
			return i;
	return null;

function cargarContenido(idOrigen){
	//cojemos la posicion que ocupa el dropdown que tiene que ser puesto en el array
	var posicionDestino = buscar(listadoSelects,idOrigen)+1;		
	//obtenemos el dropdown que el usuario ha modificado
	var origen = document.getElementById(idOrigen);
	//obtenemos la opcion seleccionada
	var seleccionada = origen.options[origen.selectedIndex].value;
	//si el usuario eligio la opcion Elige.. no buscaremos nada en la BBDD
	if(seleccionada == ""){
		var x = posicionDestino;
		var actual = null;
		//deshabilitamos las opciones de el select dependiente ya que no hemos seleccionado ningun valor
			actual = document.getElementById(listadoSelects[x]);
			actual.length = 0;
			var nuevaOpcion = document.createElement("option");
			nuevaOpcion.value = 0;
			nuevaOpcion.innerHTML = "Selecciona una opción..";
			actual.disabled = true;
	}else if(idOrigen != listadoSelects[listadoSelects.length-1]){
		var idDestino = listadoSelects[posicionDestino];
		var destino = document.getElementById(idDestino);
		var ajax = crearXMLHttpRequest();"GET","action.php?action=dependientes&select="+idDestino+"&option="+seleccionada, true);
		ajax.onreadystatechange = function(){
				if(ajax.readyState == 1){
					destino.length = 0;
					var nuevaOp = document.createElement("option");
					nuevaOp.value = 0;
					nuevaOp.innerHTML = "Cargando...";
					destino.disabled = true;
				}if(ajax.readyState == 4){
					destino.parentNode.innerHTML = ajax.responseText;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
		<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
		<link rel="stylesheet" type="text/css" href="css/icSquared_v1.0.css"/>
		<title>Información del usuario</title>
	<div class="registro">
		<div class="container-fluid">
			<div class="col-xs-12 col-sm-12 col-md-2" style="left:79%; margin-top:2%">
				<?php echo $msgReg; ?>
				<form action="action.php?accion=userRegisterInfo" method="post" role="form" enctype="multipart/form-data">
					<h3 class="text-center" style="font-size:35px"> Datos Personales </h3><br />
					<div class="form-group">
						<label>Que eres?</label>
						<?php desplegable_tipoUser(-1); ?>
					<div class="form-group">
						<input type="text" name="nombre" class="form-control" required="required" placeholder="Introduce tu nombre"/>
					<div class="form-group">
						<input type="text" name="apellidos" class="form-control" required="required" placeholder="Introduce tus apellidos"/>
					<div class="form-group">
						<label>Fecha de nacimiento</label>
						<input type="date" name="fechaNac" required="required" />
					<div class="form-group">
						<label>Sexo:</label><br />
						<input type="radio" name="sexo" value="male" checked="checked"/> <i class="fa fa-mars fa-lg"></i> Hombre &nbsp;&nbsp;&nbsp;&nbsp;
						<input type="radio" name="sexo" value="female" /> <i class="fa fa-venus fa-lg"></i> Mujer 
					<div class="form-group">
						<?php desplegable_pais(); ?>
					<div class="form-group">
						<select disabled="disabled" name="ciudad" id="ciudad">
							<option value="0">Selecciona una opción..</option>
					<div class="form-group">
						<label>Imagen de Perfil:</label>
						<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
						<input type="file" enctype="multipart/form-data" name="foto_perfil" required="required">
					<input class="btn btn-success" type="submit" id="enviar" value="Guardar" style="margin-left:40%"/>

<script src="js/jquery-1.12.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/selectsDependientes.js"></script>

And here the chunk of php code:

//connect BD function
function conectar(){
    $connect = mysqli_connect("localhost","root","xxxx","xxxx");

    //set the language
    $connect->query("SET NAMES 'utf8'");

    return $connect;

//disconect BD function
function desconectar($connect){

    //dropdown pais 
function desplegable_pais(){ 
$conexion = conectar(); $sql = "SELECT * FROM PAIS";

    echo '<select name="pais" id="pais" onChange="get_ciudad(this.value);">';
    echo '<option value="0">Elige un País</option>';
            echo '<option value="'.$fila[0].'">'.$fila[1].'</option>';
        echo '<p> Error en la conexion o consulta.. </p> <br />';

    echo '</select>';

if($action == "dependientes"){

    $destino = $_GET['select'];
    $seleccionado = $_GET['option'];

    //funcion que valida que el select enviado por GET exista
    function validar($destino){
        global $listadoSelects;
        $validado = false;

            $validado = true;

        return $validado;

    //funcion que valida la opcion seleccionada
    function validarOp($seleccionado){
        $validado = false;

            $validado = true;

        return $validado;

    if(validar($destino) && validarOp($seleccionado)){
        $conexion = conectar();

        $sql = "SELECT idPoblacion, nombre,comunidadAut FROM POBLACION WHERE id_pais='".$seleccionado."'";

        if($resultado = $conexion -> query($sql)){
            echo '<select name="'.$destino.'" id="'.$destino.'" onChange="cargarContenido(">';
            echo '<option value="0">Elige</option>';
            while($fila = mysqli_fetch_array($resultado)){
                //$fila[0] = htmlentities($fila[0]);

                echo "<option value='".$fila[0]."'>".$fila[1]." - ".$fila[2]."<option>";
asked by Anna 30.03.2016 в 11:54

2 answers


There is a bug in the line that shows the cities:

         echo "<option value='".$fila[0]."'>".$fila[1]." - ".$fila[2]."<option>";

The label <option> is never closed if not a new one is opened, and that is why it is all stuck. The solution is simple, close the <option> tag:

         echo "<option value='".$fila[0]."'>".$fila[1]." - ".$fila[2]."</option>";
answered by 30.03.2016 в 14:31

This is the simplest or simplest thing I can offer you ...

<script type="text/javascript" src=""></script>
<meta charset="utf-8">

    <SELECT id="departamento" name="departamento"> 
        <OPTION value=0 selected>Elija departamento</OPTION>
        <OPTION value=1>BOACO</OPTION>
        <OPTION value=2>CARAZO</OPTION>
<br />

<select id="municipio" disabled>
    <OPTION value=0 selected>Elija municipio</OPTION> 

    $(document).ready(function () {
        $("#departamento").change(function () {
            $("#municipio").prop('disabled', false);
            if (this.value == 1) {
                $("#municipio").html("<OPTION value=9>boaco</OPTION><OPTION value=59>teustepe</OPTION>");
            else if (this.value == 2) {
                $("#municipio").html("<OPTION value=01>jinotepe</OPTION><OPTION value=41>diriamba</OPTION>");
            else if (this.value == 3) {
                $("#municipio").html("<OPTION value=69>chinandolfi</OPTION><OPTION value=19>corintio</OPTION>");
            else {
                $("#municipio").prop('disabled', true);
                $("#municipio").html("<OPTION value=0 selected>Elija municipio</OPTION>");
answered by 22.01.2018 в 21:52