JQUERY: Selects Anidados Dinámicos

darmando.liraHTML / Javascript / jQuery / PHPNo Comments

Les quiero enseñar un ejemplo que anteriormente lo realice con AngularJS lo pueden visualizar aqui  es casi la misma lógica en cuestión que tienes un AJAX y mandas las petición al servidor para posteriormente obtener un JSON y pintarlo en nuestro HTML, incluso use la misma tabla y el mismo archivo PHP.

Primero que nada nuestro HTML lo tenemos de la siguiente forma:

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
     <br>
         <div class="row">
            <div class="col-md-5 col-md-offset-3">
              <div class="panel panel-success">
                  <div class="panel-heading">
                    <h3 class="panel-title">Desarrollo Hidrocálido - Selects Anidados con JQuery</h3>
                </div>
                  <div class="panel-body">
                    <form>
                        <fieldset>
                            <div class="form-group">
                             <select id="selCategorias" class="form-control">
                             </select>
                          </div>
                          <div class="form-group">
                             <select id="selPistos" class="form-control">
                             </select>
                          </div>
                          <div class="row">
                           <div class="col-md-12">
                            <input type="reset" class="btn btn-lg btn-default btn-block" type="button" value="Limpiar">
                           </div>
                          </div>
                        </fieldset>
                     </form>
                  </div>
              </div> <!-- Fin del panel panel-default -->
            </div>
          </div> <!-- Fin del Row -->
     </div> <!-- Fin del Container -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/main.js"></script>
    </body>
</html>

Ahora procedemos con nuestro archivo JavaScript:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$(document).ready(function(){
obtenerCategorias();
});
  function obtenerCategorias(){
    $.ajax({
        type: 'GET',
        data: { metodo : 'obtenerCategorias' },
        url: 'php/index.php',
        dataType: "json",
success: renderListaCategorias
    });
  }
function renderListaCategorias(data){
    $('#selCategorias option').remove();
    var list = data == null ? [] : (data.categorias instanceof Array ? data.categorias : [data.categorias ]);
    if (list.length < 1) {
       alert("SIN NINGÚN RESULTADO EN LA BD");
    } else {
        $('#selCategorias').append('<option value="0">SELECCIONAR...</option>');
        $.each(list, function(index, categoria) {
            $('#selCategorias').append('<option value='+categoria.idCategoria+'>'+categoria.descripcion+'</option>');
        });
        $('#selCategorias').focus();
    }
}
$('#selCategorias').change(function(){
   obtenerPistos($(this).val());
});
  function obtenerPistos(idCategoria){
    $.ajax({
        type: 'GET',
        data: { metodo : 'obtenerPistos' , idCategoria : idCategoria },
        url: 'php/index.php',
        dataType: "json",
        success: rendeListaPistos
    });
  }
function rendeListaPistos(data){
    $('#selPistos option').remove();
    var list = data == null ? [] : (data.pistos instanceof Array ? data.pistos : [data.pistos ]);
    if (list.length < 1) {
       alert("SIN NINGÚN RESULTADO EN LA BD");
    } else {
        $('#selPistos').append('<option value="0">SELECCIONAR...</option>');
        $.each(list, function(index, pisto) {
            $('#selPistos').append('<option value='+pisto.descripcion+'>'+pisto.descripcion+'</option>');
        });
        $('#selPistos').focus();
    }
}
$('#selPistos ').change(function(){
   alert("Seleccionaste: "+$(this).val());
});

y por ultimo nuestro archivo PHP esta se la siguiente forma:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
/*****************************/
/***DESARROLLO HIDROCALIDO****/
/*****************************/
require 'connector.php';
if (isset($_REQUEST['metodo'])) {
   $metodo = trim($_REQUEST['metodo']);
}else{
   $metodo = "";
}
if( $metodo == 'obtenerCategorias' ){
  obtenerCategorias();
}else if ($metodo == 'obtenerPistos') {
if (isset($_REQUEST['idCategoria'])) {
$idCategoria = trim($_REQUEST['idCategoria']);
}else{
$idCategoria = "";
}
   obtenerPistos($idCategoria);
}
function obtenerPistos($idCategoria){
    $sql ="SELECT * FROM categorias AS CA INNER JOIN pistos AS PI ON CA.idCategoria = PI.idCategoria WHERE PI.idCategoria = '$idCategoria' ";
    try {
        $db = getConnection();
        $stmt = $db->query($sql);  
        $detalle = $stmt->fetchAll(PDO::FETCH_OBJ);
        $db = null;
        echo '{"pistos": ' . json_encode($detalle) . '}';
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e-S>getMessage() .'}}';
    }
}
function obtenerCategorias(){
    $sql ="SELECT * FROM categorias";
    try {
        $db = getConnection();
        $stmt = $db->query($sql);  
        $detalle = $stmt->fetchAll(PDO::FETCH_OBJ);
        $db = null;
        echo '{"categorias": ' . json_encode($detalle) . '}';
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}
?>

Pudimos llenar dos selects por medio de una consulta PHP retornandola en un JSON, y con un evento change obtuvimos el valor del primer objeto select para después ejecutar el segundo método donde vamos y consultamos a la BD para otra vez retornar un JSON de nuestro PHP.

Pueden ver el ejemplo funcionar AQUI

Conclusión : Al inicio puede ser difícil de entender pero una vez que lo intentas tu mismo se re hará sencillo y lo entenderás mejor, cualquier duda o aclaración puedes dejarme un comentario.

More from my site

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.