0

Estoy intentando atraves de un select, dependiendo la opcion seleccionada, cargarle a otro select las opciones hijos, por ej , provincias "Buenos Aires" > ciudades "Ciudades de Buenos Aires", realmente nose que estoy haciendo mal pero no pude lograrlo aun, esto es una prueba de lo que hice hasta el momento.

var ciudades_BuenosAires = ['Azul', 'Bahia Blanca', 'Carmen de Patagones', 'La Plata', 'Mar del Plata', 'Necochea', 'Olavarria', 'Pergamino', 'San Nicolas', 'Villa Gesel'];

var provincias_txt = jQuery('#select2-ubicacion_provincia-container').text();

if (provincias_txt == 'Buenos Aires') {
    jQuery(ciudades_BuenosAires).each(function(i) {
        jQuery('#ubicacion_ciudad').append('<option value=' + ciudades_BuenosAires[i] + '\>' + ciudades_BuenosAires[i] + '</option>');
    });
} else {
    alert('No es Buenos Aires')
}
4
  • De donde estas obteniendo este select #select2-ubicacion_provincia-container? son option fijos en el html?
    – TheVicShow
    Commented el 30 ene. 2019 a las 17:55
  • En realidad #select2-ubicacion_provincia-container es el que almacena las opciones "padre" ej "Buenos Aires" y #ubicacion_ciudades es donde debo almacenar las opciones "hijo" ej "ciudades de Buenos Aires".
    – user98190
    Commented el 30 ene. 2019 a las 17:59
  • Si es un select con options fijos ejemplo <select><option value="Buenos Aires">Buenos Aires</option></select> debes usar el .val() en lugar del .text() al momento de hacer el selector JQuery
    – TheVicShow
    Commented el 30 ene. 2019 a las 18:01
  • Si son option fijos
    – user98190
    Commented el 30 ene. 2019 a las 18:03

1 respuesta 1

0

Replique el código y usando el val() funciona correctamente, puedes ver los cambios a continuación, debes agregar un evento de change al select, para cuando cambien de opción sea ejecutado el código, según el valor seleccionado construirá el select hijo

var ciudades_BuenosAires = ['Azul', 'Bahia Blanca', 'Carmen de Patagones', 'La Plata', 'Mar del Plata', 'Necochea', 'Olavarria', 'Pergamino', 'San Nicolas', 'Villa Gesel'];

    jQuery('#select2-ubicacion_provincia-container').on('change',function(){    	
var provincias_txt = $(this).val();

if (provincias_txt == 'Buenos Aires') {
	jQuery(ciudades_BuenosAires).each(function(i) {
		jQuery('#ubicacion_ciudad').append('<option value=' + ciudades_BuenosAires[i] + '\>' + ciudades_BuenosAires[i] + '</option>');
	});
} else {
	$('#ubicacion_ciudad').empty()
	alert('No es Buenos Aires')
}
    })
<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
      
    <select id="select2-ubicacion_provincia-container">
      <option value="Otra Opcion">Otra Opcion</option>
      <option value="Buenos Aires">Buenos Aires</option>
    </select>

    <select id="ubicacion_ciudad"></select>

Tu codigo esta bien, solo debes usar el val() en lugar del text() cuando vas a obtener atributos value de un elemento html.

3
  • Si, esto tiene sientido, probe y aun no se esta cumpliendo la condicion, ya que de entrada me aparece el alert y al seleccionar Buenos Aires no me carga la lista de opciones hijo, realmente nose porque
    – user98190
    Commented el 30 ene. 2019 a las 18:40
  • Entonces debes usar un evento, modifique el código para que veas el uso de los eventos en Jquery, te dejo la documentacion para que veas los diferentes eventos que puedes usar. Documentacion
    – TheVicShow
    Commented el 30 ene. 2019 a las 18:55
  • Gracias esto funciono!!!
    – user98190
    Commented el 30 ene. 2019 a las 19:04

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.