none
Desplegables dependientes RRS feed

  • Pregunta

  • -----CODIGO HTML-------

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script rel="javascript" type="text/javascript" href="js/jquery-1.11.3.min.js"></script>

     <script>
            $(function inicio() {
                $.ajax({
                    type: "get",
                    url: "/json1.json",
                    dataType: "json",
                    async: false,
                    success: function (listadoPais) {
                        console.log("funciona!!");
                        $.each(listadoPais, function (index) {
                            var paises = listadoPais[index];
                            $.each(paises, function (_index) {
                                var pais = paises[_index];
                                $.each(pais, function (__index) {
                                    $("select#contenedor").append("<option>" + pais[__index].ID + "</option>");

                                });
                            });
                        });
                    },
                });
                $.ajax({
                    type: "get",
                    url: "/json1.json",
                    dataType: "json",
                    async: false,
                    success: function (listadoPais) {
                        console.log("funciona1!!");
                        $.each(listadoPais, function (index) {
                            var paises = listadoPais[index];
                            $.each(paises, function (_index) {
                                var pais = paises[_index];
                                $.each(pais, function (__index) {
                                    $("select#contenedor1").append("<option>" + pais[__index].Name + "</option>");

                                });
                            });
                        });
                    },
                });
            });

        </script>
    </head>
    <body>
      <select id="contenedor" onclick="inicio()">
     </select>
    <select id="contenedor1" onclick="final()"></select>
    </body>
    </html>

    ------ESTE ES MI CODIGO JSON--------

    {
      "listadoPais": {
        "pais": [
          {
            "ID": "1",
            "Name": "españa"
          },
          {
            "ID": "2",
            "Name": "israel"
          },
          {
            "ID": "3",
            "Name": "francia"
          }
        ]
      }
    }

    ----MI DUDA-----

    Me gustaría saber como puedo relacionar estos dos select para que al pinchar en id=2 solo me salga la opción de Israel, ahora mismo si pincho en 2 me salen las tres opciones, sin filtro. Muchísimas gracias.


    martes, 7 de marzo de 2017 10:48

Respuestas

  • Acostumbrado a responder en ingles te había escrito la respuesta en ingles jeje..

    Bueno, te pongo un ejemplo sencillo de como relacionarlos. Realmente no es la solución más optima pero lo puedes tomar como un primer paso, te dejo por aquí el código y el Jsfiddle del proyecto funcionando:

    HTML:

      <select id="contenedor" onclick="inicio()">
     </select>
    <select id="contenedor1" onclick="final()"></select>
    

    JS:

    $(document).ready(function(){
    		inicializar('');
         $("#contenedor").change(function(){
           inicializar(document.getElementById("contenedor").value);
         });
         
     });
     
     function inicializar(filtro) {
     		$( "#contenedor" ).empty();
        $( "#contenedor1" ).empty();
     	  var json = {"listadoPais": {"pais": [{"ID": "1","Name": "españa"},{"ID": "2","Name": "israel" },{ "ID": "3","Name": "francia"}] }};
                   
                        console.log("funciona!!");
                        $.each(json, function (index) {
                            var paises = json[index];
                            $.each(paises, function (_index) {
                                var pais = paises[_index];
                                $.each(pais, function (__index) {
                                	if(pais[__index].ID == filtro) {
                                    $("select#contenedor").append("<option selected='selected'>" + pais[__index].ID + "</option>");
                                    } else {
                                    	$("select#contenedor").append("<option>" + pais[__index].ID + "</option>");
                                    }
    
                                });
                            });
                        });
                    
    
                        $.each(json, function (index) {
                            var paises = json[index];
                            $.each(paises, function (_index) {
                                var pais = paises[_index];
                                $.each(pais, function (__index) {
                                    if(filtro != '') {
                                    	if(pais[__index].ID == filtro) {
                                      	$("select#contenedor1").append("<option>" + pais[__index].Name + "</option>");
                                      }
                                    } else {
                                    $("select#contenedor1").append("<option>" + pais[__index].Name + "</option>");
                                    }
                                    
    
                                });
                            });
                        });
     }
    
     
    
              

    Espero que te sea de ayuda ;D cualquier duda más puedes ponerla por aquí.

    Ah! se me olvidaba el ejemplo funcional:

    https://jsfiddle.net/javierif/6gLhyuja/

    Un saludo.

    • Propuesto como respuesta JavierIF martes, 7 de marzo de 2017 11:23
    • Marcado como respuesta Laura1990 martes, 7 de marzo de 2017 15:43
    martes, 7 de marzo de 2017 11:22

Todas las respuestas

  • Acostumbrado a responder en ingles te había escrito la respuesta en ingles jeje..

    Bueno, te pongo un ejemplo sencillo de como relacionarlos. Realmente no es la solución más optima pero lo puedes tomar como un primer paso, te dejo por aquí el código y el Jsfiddle del proyecto funcionando:

    HTML:

      <select id="contenedor" onclick="inicio()">
     </select>
    <select id="contenedor1" onclick="final()"></select>
    

    JS:

    $(document).ready(function(){
    		inicializar('');
         $("#contenedor").change(function(){
           inicializar(document.getElementById("contenedor").value);
         });
         
     });
     
     function inicializar(filtro) {
     		$( "#contenedor" ).empty();
        $( "#contenedor1" ).empty();
     	  var json = {"listadoPais": {"pais": [{"ID": "1","Name": "españa"},{"ID": "2","Name": "israel" },{ "ID": "3","Name": "francia"}] }};
                   
                        console.log("funciona!!");
                        $.each(json, function (index) {
                            var paises = json[index];
                            $.each(paises, function (_index) {
                                var pais = paises[_index];
                                $.each(pais, function (__index) {
                                	if(pais[__index].ID == filtro) {
                                    $("select#contenedor").append("<option selected='selected'>" + pais[__index].ID + "</option>");
                                    } else {
                                    	$("select#contenedor").append("<option>" + pais[__index].ID + "</option>");
                                    }
    
                                });
                            });
                        });
                    
    
                        $.each(json, function (index) {
                            var paises = json[index];
                            $.each(paises, function (_index) {
                                var pais = paises[_index];
                                $.each(pais, function (__index) {
                                    if(filtro != '') {
                                    	if(pais[__index].ID == filtro) {
                                      	$("select#contenedor1").append("<option>" + pais[__index].Name + "</option>");
                                      }
                                    } else {
                                    $("select#contenedor1").append("<option>" + pais[__index].Name + "</option>");
                                    }
                                    
    
                                });
                            });
                        });
     }
    
     
    
              

    Espero que te sea de ayuda ;D cualquier duda más puedes ponerla por aquí.

    Ah! se me olvidaba el ejemplo funcional:

    https://jsfiddle.net/javierif/6gLhyuja/

    Un saludo.

    • Propuesto como respuesta JavierIF martes, 7 de marzo de 2017 11:23
    • Marcado como respuesta Laura1990 martes, 7 de marzo de 2017 15:43
    martes, 7 de marzo de 2017 11:22
  • Mil gracias!!! Ahora que estoy empezando esta ayuda me viene genial. Un saludo.
    martes, 7 de marzo de 2017 15:45