Bootstrap-select y AJAX

cybervandal · #1 (**permalink**) 20/10/2020, 10:26

Estoy intentando hacer un combobox donde al seleccionar la comunidad autónoma, se abra otro desplegable con las provincia de esa comunidad y al seleccionar la provincia otro con la poblaciones de esa provincia, etc...
Cuando hago eso mediante php, Jquery y Ajax no problem

El problema es cuando intento usar el plugin Bootstrap-select, entonces no consigo que funcione. Me interesa especialmente este plugin porque incluye un cuadro de búsqueda con typeahead lo que facilita mucho para no mostrar un select con 200 poblaciones de una misma provincia.

Me echais una mano???

Código HTML:

<?php
require_once("includes/conexionBD.php");
?>
<!DOCTYPE html>
<html lang="es-ES">
	<head>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
	</head>

	<body> 
        <div class="container-fluid">
             <form role="form" action="" method="POST">
                  <div class="form-group">
                        <label class="text-info" for="comunidadA">Comunidad Autónoma:</label>
                        <select name="comunidadA" id="comunidadA" class="selectpicker" data-live-search="true">
                          <option value="">Seleccionar</option>
                          <?php 
                          $comunidadA = get_comunidadesA();
                          foreach ($comunidadA as $key=>$value){
                            echo "<option value=\"".$comunidadA[$key]["idComunidadA"]."\">".$comunidadA[$key]["comunidadA"]."</option>";
                          }
                          ?>
                        </select>
                      </div>

                      <div class="form-group">
                        <label class="text-info" for="provincia">Provincia:</label>
                        <div id="provincia">
                        </div>
                      </div>
                      
                      <div class="form-group">
                        <label class="text-info" for="poblacion">Población</label>
                        <div id="poblacion">
                        </div>  
                      </div>

                      <div class="form-group">
                            <input type="submit" class="btn btn-info btn-md" value="Enviar"> 
                      </div>
                    </form>

    </div>
    <?php    include_once("plugins/jquery/jquery.php"); ?>
    <script src="plugins/bootstrap/js/bootstrap.bundle.js"></script>
    <script type="text/javascript" src="plugins/typeahead/typeahead.bundle.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
 

	<script>
	$(document).ready(function(){

		$('.selectpicker').selectpicker();

		$("#comunidadA").on("change",function(){
			var idComunidadA = $(this).val();
			if(idComunidadA){
				$.ajax({
					type:"POST",
					url:"provincias.ajax.php",
					data:"idCA="+idComunidadA,
					success:function(html){
						$("#provincia").html(html);
						$('#provincia').selectpicker('refresh');
					}
				});
			}else{
				$("#provincia").html("<option value="">Seleccione primero autonomía</option>");
			}
		});
	});  
	</script>
  </body>
</html>
<?php 
mysqli_close($link);
die(); 
?>

y provincias AJAX:

Código HTML:

<?php
include_once("includes/conex.php");

if(isset($_POST["idCA"]) && !empty($_POST["idCA"])){
    echo "<select name=\"provincia\" id=\"provinciaSel\" class=\"selectpicker\">";
		$consulta = mysqli_query($GLOBALS["link"] ,"SELECT idProvincia, provincia FROM cp_codipostal WHERE idComunidadA = ".$_POST['idCA']." GROUP BY idProvincia, provincia");
		$num = mysqli_num_rows($consulta);
		if($num > 0){
			echo '<option value="">Seleccione...</option>';
			while($fila = mysqli_fetch_assoc($consulta)){
				echo '<option value="'.$fila['idProvincia'].'">'.$fila['provincia'].'</option>';
			}
		}
	echo "</select>";
}else{
	echo "<select name=\"provincia\" id=\"provinciaSel\" class=\"selectpicker\">";
		echo '<option value="">Provincia no disponible</option>';
	echo "</select>";	
}
?>
	<script>
	$(document).ready(function(){

		$("#provinciaSel").on("change",function(){
			var idProvincia = $(this).val();
			if(idProvincia){
				$.ajax({
					type:"POST",
					url:"poblaciones.ajax.php",
					data:"idPv="+idProvincia,
					success:function(html){
						$("#poblacion").html(html);
                                                $('#poblacion').selectpicker('refresh');
					}
				});
			}else{
				$("#poblacion").html("<option value="">Seleccione primero provincia</option>");
			}
		});
		$('.selectpicker').selectpicker();
	});  
	</script>

¿Porque no funciona?