Una ayudita

[kevin44]

se que es re largo lo que voy a escribir pero realmente no tengo a quien preguntarle.

Hola, estoy aprendiendo javascript, ahora estamos dando jquery y estoy trancado en este ejercicio y lo que no entiendo es como generar una funcion en jquery que para que cuando seleccione un pais dentro del select, muestre especificamente las ciudades de ese pais partiendo de la base que en el ejercicio me dan 4 arrays indexados.

Código javascript:

Uruguay=["Tacuarembo","Paysandu","Treinta y Tres","Rivera","Salto"];
Argentina=["Buenos Aires","La Rioja","Mendoza"];
Portugal=["Lisboa","Porto"];
España=["Madrid","Sevilla"];
 

pense en poner varios if para cada pais dentro de la funcion pero supongo que debe haber un metodo mas facil. ejemplo(de lo que pense)

Código javascript:

if($('#pais option:selected').text() == "Portugal")
 

y lo que tampoco me queda claro tampoco es como generar de forma dinamica un elemento select para mostrar las ciudades.

la letra del ejercicio por las dudas(por si no me entienden)

Genere un elemento select de forma dinámica, dentro del div cuyo id es ciudades. El nuevo elemento deberá contar con la cantidad de elementos option de acuerdo a la cantidad de ciudades de cada vector. Ejemplo: si el usuario selecciona Portugal, dinámicamente se generará en la página el siguiente código dentro del div ciudades:

Código javascript:

<select id=’s1’>
    <option value=’0’>Lisboa</option> 
<option value=’0’>Porto</option>
</select>
 

y el html

Código javascript:

<div id="pais">
              <label class="fila2">Ingrese el pa&iacute;s de origen </label><br>
              <select class="fila2">
                  <optgroup label="America">
                      <option value="Uruguay">Uruguay</option>
                      <option value="Uruguay">Argentina</option>
                  </optgroup>
                  <optgroup label="Europa">
                      <option value="Uruguay">Espa&ntilde;a</option>
                      <option value="Uruguay">Portugal</option>
                  </optgroup>
              </select>
</div>
 

GRACIAS!

[Naahuel]

Creo que la parte más confusa o complicada de tu problema, es obtener los arreglos a partir del valor del select. Básicamente queremos obtener una variable a partir de un string con su nombre. Si la variable es global, podemos hacer esto:

Código Javascript:

variable = window['nombre_de_variable_en_string'];
 

A partir de ahí es más fácil. Una forma sería algo así:

Código Javascript:

// variables GLOBALES
Uruguay=["Tacuarembo","Paysandu","Treinta y Tres","Rivera","Salto"];
Argentina=["Buenos Aires","La Rioja","Mendoza"];
Portugal=["Lisboa","Porto"];
Espana=["Madrid","Sevilla"];
 
$(function(){
    // acá podemos manipular el DOM con jQuery
    
    // obtengo los dos combos en variables
    var $combo_pais = $('#combo_pais');
    var $combo_ciudad = $('#combo_ciudad');
    
    // en el evento que el combo pais cambie, hacer algo
    $combo_pais.change(function(){
        // obtengo el arreglo de acuerdo al valor que se seleccionó
        var arreglo = window[$(this).val()];
        
        //vacío el select de ciudad
        $combo_ciudad.empty();
        
        // recorro el arreglo agregando cada valor al select de ciudad usando $.each()
        $.each(arreglo, function(){
            $combo_ciudad.append('<option value="'+this+'">'+this+'</option>');
        })
    });
});
 

Código HTML:

<div id="pais">
          <label class="fila2">Ingrese el pa&iacute;s de origen </label><br>
          <select id="combo_pais" class="fila2">
                <option value="0">Seleccione un país</option>
              <optgroup label="America">
                  <option value="Uruguay">Uruguay</option>
                  <option value="Argentina">Argentina</option>
              </optgroup>
              <optgroup label="Europa">
                  <option value="Espana">Espa&ntilde;a</option>
                  <option value="Portugal">Portugal</option>
              </optgroup>
          </select>
          <select id="combo_ciudad">
            <option value="0">Seleccione un país primero</option>
          </select>
    </div>
 

El código está prolijo y bien comentado, para que lo entiendas sin copiar y pegar ;)

[kevin44]

Gracias Naahuel! ahora me queda mas claro!