¿Cómo actualizo un select box al cambiar otro?

Question

Tengo dos select box, uno con provincias y otro con ciudades. Quiero que cuando se seleccione una provincia, el select box de las ciudades se actualice con los valores recibidos a partir de una llamada AJAX, pero algo falla y sus valores no cambian.

Éste es el código donde se realiza la llamada AJAX:

<!--ajax-->    
<script type="text/javascript">
    $(document).ready(function(){
        $('#provincia').on('change',function(){

            var provincia = $(this).val();

            $.ajax({
                    type:"POST", 
                    dataType:'html',
                    url : "pages/prueba.php",
                    data : { opcion: provincia },    
                    success: function(response){
                        alert("HOLA");
                        $("#ciudadID").html(response);
                    }
                    error: function() {
                        alert('Error occured');
                    }
               });
          });
     }

</script>

Y éste es el código de prueba.php:

<?php
 if(isset($_REQUEST["opcion"]))
 {
    $opciones = '<option value="0">"Elige la ciudad"</option>';
    $conexion = new mysqli("localhost","root", "", "tu_valor");
    $sqlCIU = "SELECT DISTINCT ciudad FROM establecimiento WHERE provincia ='" . $_REQUEST['opcion'] . "'";
    $resCIU = $conexion->query($sqlCIU);
    while( $fila = $resCIU->fetch_array() )
    {
       $opciones.='<option value="'.$fila[0].'">'.$fila[0].'</option>';
    }

    // Liberar resultados
    mysqli_free_result($resCIU);

    // Cerrar la conexión
    mysqli_close($conexion);

    echo $opciones;
 }
?>

<!-- html con los select box -->

 <select name="provincia" id="provincia" class="form-control">
 <option value="" selected>Elige la provincia</option>
<?PHP 

$conexion = new mysqli("localhost","root", "", "tu_valor");
$acentos = $conexion->query("SET NAMES 'utf8'");

$sqlPROV = "SELECT DISTINCT provincia FROM establecimiento";

if ($resPROV = $conexion->query($sqlPROV)) 
{
    while ($fila = $resPROV->fetch_row()) 
    {

    echo "<option value='" . $fila[0] . "' >" . $fila[0] . "</option>";    
    }
    $resPROV->close();
 }
?>
</select>
</div>
<div class="form-group">

  <select name="ciudad" id="ciudadID" class="form-control">
  <option selected>Elige tu ciudad</option>   

Answer 1

He editado la pregunta para añadir una descripción del problema y formatear mejor el código... y entonces me he dado cuenta de que el código JavaScript contiene errores de sintaxis (que deberías poder ver desde la consola de JS) y que harán que la petición AJAX no se realice.

En concreto:

• falta una coma (,) entre el success y el error.
• falta un paréntesis de cierre al final del todo.

Corrige eso y el código quedará así:

$(document).ready(function(){
  $('#provincia').on('change',function(){

    var provincia = $(this).val();

    $.ajax({
      type:"POST", 
      dataType:'html',
      url : "pages/prueba.php",
      data : { opcion: provincia },    
      success: function(response){
        alert("HOLA");
        $("#ciudadID").html(response);
      },  // aquí faltaba una coma
      error: function() {
        alert('Error occured');
      }
    });
  });
});

Answer 2

Tu ajax estaba diciendo que el dataType es html cuando yo te aconsejaria que ocuparas json

<script type="text/javascript">
$(document).ready(function() {
            $('#provincia').on('change', function() {

                var provincia = $(this).val();

                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    url: "pages/prueba.php",
                    data: {
                        opcion: provincia
                    },

                    success: function(response) {
                        alert("HOLA");
                        $("#ciudadID").html(response);
                    },
                    error: function() {
                        alert('Error occured');
                    }
                });

            });
        });
</script>

Por otro lado la ventaja de trabajar con tipos de datos json es un codigo que es muy amigable con javascript y te ayuda a identificar y gestionar los datos, por ende, tu codigo una vez que ocupo el valor de provincia, debe devolver echo json_encode($opciones);. Pero estas opciones no debes devolver el tipo de elemento html, si no lo que devuelve tu respuesta a la llamada de tu base de datos.

$ciudades = array();
while ($fila = $resCIU - > fetch_array()) {
   $ciudades[] = $fila[0];
}
echo json_encode($ciudades);

Luego en la respuesta de tu AJAX recorrer este arreglo y agregas las opciones a un elemento HTML, podria ser algo asi :

var $ciudad= $('#ciudad');
$ciudad.empty();
$('#ciudad').empty();
for (var i = 0; i < data.length; i++) {
    $ciudad.append('<option id=' + data[i] + ' value=' + data[i] + '>' + data[i] + '</option>');
}

Por lo tanto tu ajax deberia quedar mas o menos asi :

<script type="text/javascript">
$(document).ready(function() {
            $('#provincia').on('change', function() {

                var provincia = $(this).val();

                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    url: "pages/prueba.php",
                    data: {
                        opcion: provincia
                    },

                    success: function(response) {
                        alert("HOLA");
                        var $ciudad = $('#ciudad');
                        $ciudad.empty();
                        $('#ciudad').empty();
                        for (var i = 0; i < response.length; i++) {
                            $ciudad.append('<option id=' + response[i] + ' value=' + response[i] + '>' + response[i] + '</option>');
                        }
                    },
                    error: function() {
                        alert('Error occured');
                    }
                });

            });
        });
</script>