Foros del Web » Programando para Internet » Javascript »

tercer Element

Estas en el tema de tercer Element en el foro de Javascript en Foros del Web. Hola a todos alguien sabe si esto se puede adaptar para un tercer select y array? Código HTML: <?xml version= "1.0" encoding= "UTF-8" ?> <!DOCTYPE ...
  #1 (permalink)  
Antiguo 11/08/2014, 02:06
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 652
Antigüedad: 19 años, 4 meses
Puntos: 6
tercer Element

Hola a todos alguien sabe si esto se puede adaptar para un tercer select y array?

Código HTML:
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>Dynamic Select Statements</title> 
<script type="text/javascript">
 //<![CDATA[ 
 // array of possible countries in the same order as they appear in the country selection list 
 var countryLists = new Array(4) 
 countryLists["empty"] = ["Select a Country"]; 
 countryLists["North America"] = ["Canada", "United States", "Mexico"]; 
 countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"]; 
 countryLists["Asia"] = ["Russia", "China", "Japan"]; 
 countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"]; 
 /* CountryChange() is called from the onchange event of a select element. 
 * param selectObj - the select object which fired the on change event. 
 */ 
 function countryChange(selectObj) { 
 // get the index of the selected option 
 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 
 // use the selected option value to retrieve the list of items from the countryLists array 
 cList = countryLists[which]; 
 // get the country select element via its known id 
 var cSelect = document.getElementById("country"); 
 // remove the current options from the country select 
 var len=cSelect.options.length; 
 while (cSelect.options.length > 0) { 
 cSelect.remove(0); 
 } 
 var newOption; 
 // create new options 
 for (var i=0; i<cList.length; i++) { 
 newOption = document.createElement("option"); 
 newOption.value = cList[i];  // assumes option string and value are the same 
 newOption.text=cList[i]; 
 // add the new option 
 try { 
 cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
 } 
 catch (e) { 
 cSelect.appendChild(newOption); 
 } 
 } 
 } 
//]]>
</script>
</head>
<body>
  <noscript>This page requires JavaScript be available and enabled to function properly</noscript>
  <h1>Dynamic Select Statements</h1>
  <label for="continent">Select Continent</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">Select a Continent</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
  </select>
  <br/>
  <label for="country">Select a country</label>
  <select id="country">
    <option value="0">Select a country</option>
  </select>
</body>
 </html> 
Fuente

El ejemplo trae solo dos select (Continente, país.) habria la posibilidad de que funcione un tercero? (Continente, país, cuidad)

Ejemplo
  #2 (permalink)  
Antiguo 11/08/2014, 10:56
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: tercer Element

Te propongo otra manera:

Código Javascript:
Ver original
  1. var comboCont = document.getElementById("continente"),
  2.     comboPais = document.getElementById("pais"),
  3.     comboCiud = document.getElementById("ciudad"),
  4.     continentes = {
  5.         America: {
  6.             USA: ["San Francisco", "Seattle", "San Antonio"],
  7.             Perú: ["Lima", "Tacna", "Cusco"],
  8.             México: ["México D.F.", "Tijuana", "Guadalajara"]
  9.         },
  10.         Europa: {
  11.             España: ["Barcelona", "Valencia", "Madrid"],
  12.             Italia: ["Roma", "Venecia", "Milano"]
  13.         }
  14.     },
  15.     cambiaCiudad = function(contVal, paisVal){
  16.         var pais = continentes[contVal][paisVal];
  17.  
  18.         comboCiud.innerHTML = null;
  19.  
  20.         for (var j in pais){
  21.             var opt = document.createElement("option");
  22.             opt.value = pais[j];
  23.             opt.innerHTML = pais[j];
  24.             comboCiud.appendChild(opt);
  25.         }
  26.     },
  27.     cambiaPais = function(contVal){
  28.         var cont = continentes[contVal];
  29.  
  30.         comboPais.innerHTML = null;
  31.  
  32.         for (var i in cont){
  33.             var opt = document.createElement("option");
  34.             opt.value = i;
  35.             opt.innerHTML = i;
  36.             comboPais.appendChild(opt);
  37.         }
  38.      
  39.         cambiaCiudad(contVal, comboPais.value);
  40.     };
  41.  
  42. comboCont.addEventListener("change", function(){
  43.     cambiaPais(this.value);
  44. }, false);
  45. comboPais.addEventListener("change", function(){
  46.     cambiaCiudad(comboCont.value, this.value);
  47. }, false);
  48.  
  49. cambiaPais(comboCont.value);

Ahora, la explicación. Primero, tomo a los tres combos que debo de tener en el documento, siendo cada uno en donde irán los continentes, países y ciudades, respectivamente. Luego, creo un objeto literal en donde irán los continentes, teniendo cada uno de ellos un objeto literal con los países respectivos y estos, un array con las ciudades que les correspondan. Cuando elijamos una opción del combo de los continentes, ejecutaremos la función cambiaPais, a la cual le pasaremos como argumento el valor del combo de los continentes. En dicha función, tomamos al continente equivalente al valor seleccionado en el combo de los continentes, dejamos en blanco al combo de los países (por si hubieron valores previamente) y lo llenamos con los países que posee el continente equivalente a la opción seleccionada en el combo de los continentes. Enseguida, ejecutamos la función cambiaCiudad, a la cual le pasamos el valor seleccionado en el combo de los continentes y el valor actual del combo de los países, que como acaba de ser cargado, será el primero de la lista.

En dicha función, tomamos al país equivalente a la opción seleccionada en el combo de los países (que al haber cargado recientemente, será el primero de la lista), dejo en blanco al combo de las ciudades (por si hubieron valores previamente) y procedo a llenarlo con las ciudades albergadas en el array del país equivalente a la opción seleccionada (o por defecto) del combo de los países.

Para que desde el inicio se realice el llenado de los combos de los países y ciudades, ejecutamos a la función cambiaPais que es la que desencadenará el resto de acciones.



No olvides colocar este código justo antes de la etiqueta </body> para que todo surta efecto, pues si lo colocaras en la cabecera (<head>), primero cargaría el código JS y luego los elementos del DOM, con lo cual estos últimos nunca se verían afectados.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 11/08/2014, 16:33
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 652
Antigüedad: 19 años, 4 meses
Puntos: 6
Respuesta: tercer Element

Detalles de error de página web

Mensaje: 'comboCont' es nulo o no es un objeto
  #4 (permalink)  
Antiguo 11/08/2014, 16:58
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: tercer Element

Si no muestras el código que has elaborado, será imposible ayudarte. Analiza el código para que puedas adaptarlo a lo que necesitas, no te limites a copiarlo y pegarlo, eso no es bueno.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 12/08/2014, 11:36
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 652
Antigüedad: 19 años, 4 meses
Puntos: 6
Respuesta: tercer Element

La verdad el primer codigo que puse es el que ya me es mas amigable y esta en funcion pero si este codigo funciona pues tendre que hacer muchos cambios por que lo tengo con php/SQL

Aqui esta el codigo que me diste:

Código HTML:
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>Select</title> 
<script type="text/javascript">
 //<![CDATA[ 
var comboCont = document.getElementById("continente"),
    comboPais = document.getElementById("pais"),
    comboCiud = document.getElementById("ciudad"),
    continentes = {
        America: {
            USA: ["San Francisco", "Seattle", "San Antonio"],
            Perú: ["Lima", "Tacna", "Cusco"],
            México: ["México D.F.", "Tijuana", "Guadalajara"]
        },
        Europa: {
            España: ["Barcelona", "Valencia", "Madrid"],
            Italia: ["Roma", "Venecia", "Milano"]
        }
    },
    cambiaCiudad = function(contVal, paisVal){
        var pais = continentes[contVal][paisVal];
  
        comboCiud.innerHTML = null;
  
        for (var j in pais){
            var opt = document.createElement("option");
            opt.value = pais[j];
            opt.innerHTML = pais[j];
            comboCiud.appendChild(opt);
        }
    },
    cambiaPais = function(contVal){
        var cont = continentes[contVal];
  
        comboPais.innerHTML = null;
  
        for (var i in cont){
            var opt = document.createElement("option");
            opt.value = i;
            opt.innerHTML = i;
            comboPais.appendChild(opt);
        }
      
        cambiaCiudad(contVal, comboPais.value);
    };
 
comboCont.addEventListener("change", function(){
    cambiaPais(this.value);
}, false);
comboPais.addEventListener("change", function(){
    cambiaCiudad(comboCont.value, this.value);
}, false);
 
cambiaPais(comboCont.value);
 
//]]>
</script>
</head>
<body>

<section> Continente: 
<select id = "continente">
<option value = "America">América</option> 
<option value = "Europa">Europa</option> 
</select> </section> 

<section> País: <select id = "pais"></select> </section> 
<section> Ciudad: <select id = "ciudad"></select> </section>
  
  
</body>
 </html>

  #6 (permalink)  
Antiguo 12/08/2014, 12:02
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: tercer Element

Por lo visto, no leíste esto:

Cita:
Iniciado por Alexis88 Ver Mensaje
No olvides colocar este código justo antes de la etiqueta </body> para que todo surta efecto, pues si lo colocaras en la cabecera (<head>), primero cargaría el código JS y luego los elementos del DOM, con lo cual estos últimos nunca se verían afectados.
La lectura del código se realiza de arriba hacia abajo, por lo que colocando el código JavaScript antes que los elementos a afectar, estos últimos no se verán afectados pues el código JavaScript no puede afectar a elementos que aún no existen. Por otro lado, el que trabajes con PHP y SQL no tiene nada que ver con esto, recuerda que JavaScript se ejecuta en el lado del cliente (capa de presentación), mientras que PHP (capa de negocios) y SQL (capa de datos), se ejecutan en el lado del servidor.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #7 (permalink)  
Antiguo 12/08/2014, 13:15
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 652
Antigüedad: 19 años, 4 meses
Puntos: 6
Respuesta: tercer Element

Igual no funciona, muchas gracias Alexis88 de todos modos, muy amable por la ayuda, esperare que alguien pueda con el codigo que puse al principio


Cita:
Iniciado por Alexis88 Ver Mensaje
Por lo visto, no leíste esto:



La lectura del código se realiza de arriba hacia abajo, por lo que colocando el código JavaScript antes que los elementos a afectar, estos últimos no se verán afectados pues el código JavaScript no puede afectar a elementos que aún no existen. Por otro lado, el que trabajes con PHP y SQL no tiene nada que ver con esto, recuerda que JavaScript se ejecuta en el lado del cliente (capa de presentación), mientras que PHP (capa de negocios) y SQL (capa de datos), se ejecutan en el lado del servidor.

Saludos
  #8 (permalink)  
Antiguo 12/08/2014, 13:24
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 652
Antigüedad: 19 años, 4 meses
Puntos: 6
Respuesta: tercer Element

el problema es que no funciona con algunos navegadores solo con mozilla chrome, y que pasa con IE?? el codigo que puse yo es compatible con todos, eh ahi el problema.
  #9 (permalink)  
Antiguo 12/08/2014, 13:45
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: tercer Element

Cita:
Iniciado por pilucho Ver Mensaje
Igual no funciona...
Cita:
Iniciado por pilucho Ver Mensaje
el problema es que no funciona con algunos navegadores solo con mozilla chrome, y que pasa con IE?? el codigo que puse yo es compatible con todos, eh ahi el problema.
Pues qué raro porque lo probé en Chrome, Firefox, Safari, Opera, Opera Mobile e IE 9+ y en todos funciona a la perfección. Para que funcione en versiones anteriores a IE 9, solo tienes que cambiar la manera en como asignas una función a un determinado evento. En lugar de usar el método addEventListener, lo puedes hacer de la forma element.onevent = function.

Código Javascript:
Ver original
  1. comboCont.onchange = function(){
  2.     //El resto del código
  3. };

Lo he probado de esa manera en IE 8 y funciona perfecto. De esta forma también debe de funcionar en IE 7 y versiones anteriores pues es la manera básica de asignar una función a un evento producido en un elemento.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 12/08/2014 a las 17:52 Razón: Extra
  #10 (permalink)  
Antiguo 13/08/2014, 19:54
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 652
Antigüedad: 19 años, 4 meses
Puntos: 6
Respuesta: tercer Element

tampoco funciona aqui el codigo:


Código HTML:
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>Select</title> 
</head>
<body>

<section> Continente: 
<select id = "continente">
<option value = "America">América</option> 
<option value = "Europa">Europa</option> 
</select> </section> 

<section> País: <select id = "pais"></select> </section> 
<section> Ciudad: <select id = "ciudad"></select> </section>
  
<script type="text/javascript">
comboCont.onchange = function(){
    //El resto del código

 //<![CDATA[ 
var comboCont = document.getElementById("continente"),
    comboPais = document.getElementById("pais"),
    comboCiud = document.getElementById("ciudad"),
    continentes = {
        America: {
            USA: ["San Francisco", "Seattle", "San Antonio"],
            Perú: ["Lima", "Tacna", "Cusco"],
            México: ["México D.F.", "Tijuana", "Guadalajara"]
        },
        Europa: {
            España: ["Barcelona", "Valencia", "Madrid"],
            Italia: ["Roma", "Venecia", "Milano"]
        }
    },
    cambiaCiudad = function(contVal, paisVal){
        var pais = continentes[contVal][paisVal];
  
        comboCiud.innerHTML = null;
  
        for (var j in pais){
            var opt = document.createElement("option");
            opt.value = pais[j];
            opt.innerHTML = pais[j];
            comboCiud.appendChild(opt);
        }
    },
    cambiaPais = function(contVal){
        var cont = continentes[contVal];
  
        comboPais.innerHTML = null;
  
        for (var i in cont){
            var opt = document.createElement("option");
            opt.value = i;
            opt.innerHTML = i;
            comboPais.appendChild(opt);
        }
      
        cambiaCiudad(contVal, comboPais.value);
    };
 
comboCont.addEventListener("change", function(){
    cambiaPais(this.value);
}, false);
comboPais.addEventListener("change", function(){
    cambiaCiudad(comboCont.value, this.value);
}, false);
 
cambiaPais(comboCont.value);

};
//]]>
</script> 
</body>
 </html> 
  #11 (permalink)  
Antiguo 13/08/2014, 20:31
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: tercer Element

Creo que interpretaste mal lo que te dije. A lo que me refería era a que cambies esto:

Código Javascript:
Ver original
  1. comboCont.addEventListener("change", function(){
  2.     cambiaPais(this.value);
  3. }, false);
  4. comboPais.addEventListener("change", function(){
  5.     cambiaCiudad(comboCont.value, this.value);
  6. }, false);

Por esto:

Código Javascript:
Ver original
  1. comboCont.onchange = function(){
  2.     cambiaPais(this.value);
  3. };
  4.  
  5. comboPais.onchange = function(){
  6.     cambiaCiudad(comboCont.value, this.value);
  7. };

No te compliques con algo tan sencillo. Lee con cuidado lo que te digo para que no cometas más errores.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #12 (permalink)  
Antiguo 21/08/2014, 16:49
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 652
Antigüedad: 19 años, 4 meses
Puntos: 6
Respuesta: tercer Element

Hola Alexis88, ahora si funciona el codigo que has puesto aqui, todo bien, ahora vere si lo puedo adaptar con php y sus arrays, gracias
Código HTML:
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>Select</title> 

</head>
<body>

<section> Continente: 
<select id = "continente">
<option value = "America">América</option> 
<option value = "Europa">Europa</option> 
</select> </section> 

<section> País: <select id = "pais"></select> </section> 
<section> Ciudad: <select id = "ciudad"></select> </section>
  
<script type="text/javascript">
 //<![CDATA[ 
var comboCont = document.getElementById("continente"),
    comboPais = document.getElementById("pais"),
    comboCiud = document.getElementById("ciudad"),
    continentes = {
        America: {
            USA: ["San Francisco", "Seattle", "San Antonio"],
            Perú: ["Lima", "Tacna", "Cusco"],
            México: ["México D.F.", "Tijuana", "Guadalajara"]
        },
        Europa: {
            España: ["Barcelona", "Valencia", "Madrid"],
            Italia: ["Roma", "Venecia", "Milano"]
        }
    },
    cambiaCiudad = function(contVal, paisVal){
        var pais = continentes[contVal][paisVal];
  
        comboCiud.innerHTML = null;
  
        for (var j in pais){
            var opt = document.createElement("option");
            opt.value = pais[j];
            opt.innerHTML = pais[j];
            comboCiud.appendChild(opt);
        }
    },
    cambiaPais = function(contVal){
        var cont = continentes[contVal];
  
        comboPais.innerHTML = null;
  
        for (var i in cont){
            var opt = document.createElement("option");
            opt.value = i;
            opt.innerHTML = i;
            comboPais.appendChild(opt);
        }
      
        cambiaCiudad(contVal, comboPais.value);
    };
 
comboCont.onchange = function(){
    cambiaPais(this.value);
};
 
comboPais.onchange = function(){
    cambiaCiudad(comboCont.value, this.value);
};
 
cambiaPais(comboCont.value);

//]]>
</script> 
</body>
 </html> 

Etiquetas: element, funcion, html, select
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 22:10.