0

gracias por leer mi post, tengo un formulario , con dos campos , regiones y países, el cual es dinámico. Es decir, Si seleccionan Europa, en el desplegable de Países solo se muestran los de esa región.

Pero, tengo un problema, y es cuando los usuarios pueden autocompletar el formulario, se les rellena solo, y seleciona Europa, en ese caso, el javascript no detecta que se ha seleccionado Europa y se queda sin mostrar los países de esa región. Está hecho en woocommerce, y no puedo usar php para hacer estos campos de forma dinámico.

¿ alguna ayuda ? gracias de antemano introducir la descripción de la imagen aquí

<script type="text/javascript">
  (function($)

{
var paises = new Array()
    paises.push(["Elige país","España","Portugal","Alemania", "Francia","Inglaterra", "Otros Europa"]);
    paises.push(["Elige país","Argentina","Colombia","Perú", "Otros América del Sur y Norte"]);
    paises.push(["Elige país","México"]);
    paises.push(["Elige país","Miami", "Otros de Estados Unidos"]);

$('#region').change(function(){
    var seleccionado = $('#region').val();
  
  switch(seleccionado){
    case "1":
        var opciones = crearOptions(paises[0]);
      $('#pais option').remove();
        $('#pais').html(opciones);
    break;
    case "2":
      var opciones = crearOptions(paises[1]);
      $('#pais option').remove();
        $('#pais').html(opciones);
    break;
    case "3":
      var opciones = crearOptions(paises[2]);
      $('#pais option').remove();
        $('#pais').html(opciones);
    break;
    case "4":
      var opciones = crearOptions(paises[3]);
      $('#pais option').remove();
        $('#pais').html(opciones);
    break;
  }
});
function crearOptions(obj){
    var html = "";
  $.each(obj, function(item,value){
    html += '<option value ="' + value + '">' + value + '</option>'
  });
  return html;
}
  })( jQuery );
  </script>
6
  • creo que jquery tiene alguna funcion autocompletechange que podria ayudarte. Podrias poner el codigo html asi meto todo en codepen y pruebo? Gracias
    – Agustin G.
    Commented el 18 jul. 2020 a las 14:40
  • @AgustinG. aqui tienes : snipper.io/s/-MCXPBsq5yZf2f-dWlnk , mil gracias :D
    – ELE
    Commented el 18 jul. 2020 a las 14:52
  • Te falta proporcionar más información y, de preferencia, crear un ejemplo mínimo y verificable aquí mismo.
    – Triby
    Commented el 20 jul. 2020 a las 19:21
  • 1
    @Triby no sé que más poner, he puesto el código, captura del error, codigo completo del html. Esta hecho en wordpress , asi que supongo que ese puede ser el problema
    – ELE
    Commented el 22 jul. 2020 a las 6:27
  • Cuando hablas de autocompletar, te referis a autocompletar con el navegador? Commented el 23 jul. 2020 a las 14:04

1 respuesta 1

1

Para "escuchar" los cambios del select tienes una función anónima que no se puede llamar. La opción es crear la función aparte que puedas llamar cuando se realizan cambios, al carga la página o en otro evento definido por ti.

Se definen variables y funciones en contexto global para permitir acceso en caso de que necesites acceder desde otra función o evento.

<script>
/* Definir variables y funciones en contexto global */
var paises = new Array()
paises.push(["Elige país","España","Portugal","Alemania", "Francia","Inglaterra", "Otros Europa"]);
paises.push(["Elige país","Argentina","Colombia","Perú", "Otros América del Sur y Norte"]);
paises.push(["Elige país","México"]);
paises.push(["Elige país","Miami", "Otros de Estados Unidos"]);

// Función que se ejecuta con el evento onchange
// O manualmente
function regionUpdate() {
    // Eliminar países
    $('#pais option').remove();
    let seleccionado = parseInt($('#region').val()) || 0;
    // Se seleccionó una región válida?
    if(seleccionado > 0 && seleccionado <= paises.length) {
        let opciones = crearOptions(paises[seleccionado - 1]);
        $('#pais').html(opciones);
    }
}

function crearOptions(obj){
    var html = "";
    $.each(obj, function(item, value){
        html += '<option value ="' + value + '">' + value + '</option>'
    });
    return html;
}

// Ejecutar hasta que el DOM se haya cargado
(function($){
    // Asignar evento onchange, ejecutando la función definida arriba
    $('#region').change(regionUpdate);
    
    // Actualizar países al cargar la página
    regionUpdate();
})( jQuery );
</script>

Esto te resuelve el problema de mostrar los países cuando tienes un valor predeterminado en región, sin embargo, seguramente también necesitarás que se seleccione un país y se complica porque las opciones no existen hasta que se revisa el valor de región.

Cuando creas el contenido en PHP puedes definir una variable de javascript que será usada para seleccionar el país, por ejemplo:

// Esto es solo un ejemplo de cómo creas los selects
// Solo para ilustrar dónde colocar el código
echo "<select name=\"region\" id=\"region\">... opciones ...</select>";
echo "<select name=\"pais\" id=\"pais\"></select>";

// Aquí creas la variable con el país seleccionado
// Ya sea que lo obtengas de $_POST, $_GET, usuario, sesión, etc.
if($pais != '') {
    echo "<script>let paisActual = '$pais';</script>";

}

En Javascript verificas si existe la variable para asignar el valor al select:

// Ejecutar hasta que el DOM se haya cargado
(function($){
    // Asignar evento onchange, ejecutando la función definida arriba
    $('#region').change(regionUpdate);
    
    // Actualizar países al cargar la página
    regionUpdate();

    // Existe la variable paisActual y no está vacía?
    if(paisActual && paisActual != '') {
        // Asignas el valor
        $('#pais').val(paisActual);
    }
})( jQuery );
</script>
2
  • gracias por la ayuda, pero tengo un problema y esque los select están creados y no lo puedo hacer con php, solo puedo tocarlo con javascript para que sean dinámicos
    – ELE
    Commented el 22 jul. 2020 a las 17:24
  • Entonces edita la pregunta y explica cómo es la parte del autocompletado que mencionas, aunque en la respuesta ya te expliqué cómo puedes acceder a la función sin intervención del usuario.
    – Triby
    Commented el 22 jul. 2020 a las 17:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.