Foros del Web » Programando para Internet » Jquery »

Bootstrap-select y AJAX

Estas en el tema de Bootstrap-select y AJAX en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/10/2020, 10:26
 
Fecha de Ingreso: noviembre-2012
Mensajes: 76
Antigüedad: 8 años, 6 meses
Puntos: 3
Exclamación Bootstrap-select y AJAX

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?

Etiquetas: ajax, bootstrap, combobox, dependientes, selects
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:32.