0

Estoy tratando de que el segundo select sea dinámico dependiendo del valor del primer select y mi código es el siguiente:

$(document).ready(function() {
  let contenido1 = ['Frutas', 'Verduras', 'Hortalizas']
  let contenido2 = ['Mesa', 'Cocina', 'Refrigerador']

  $("#select_principal").on("change", function() {
    let select_principal = $(this).val()

    if (select_principal === "Primer Select") {
      for (let i = 0; i < contenido1.length; i++) {
        $('#select_dinamico').append('<option>' + contenido1[i] + '</option>');
      }
    }

    if (select_principal === "Segundo Select") {
      for (let i = 0; i < contenido2.length; i++) {
        $('#select_dinamico').append('<option>' + contenido2[i] + '</option>');
      }
    }

  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <select name="" id="select_principal">
    <option value="Primer Select">Primer Select</option>
    <option value="Segundo Select">Segundo Select</option>
    <option value="tercer Select">tercer Select</option>
  </select>

  <select name="" id="select_dinamico">

  </select>
</div>

También que cuando seleccione la segunda opción del primer select se muestre el select dinámico que corresponde y así sucesivamente.

5
  • Y el problema cual sería??
    – Yussef
    el 16 nov. 2022 a las 23:38
  • ah, el problema es que cuando selecciono la segunda opción del primer select se mezclan o juntan los valores en el select dinámico el 16 nov. 2022 a las 23:41
  • Porque no borraste lo anterior antes del for pones $('#select_dinamico').empty(); o algo asi
    – Yussef
    el 16 nov. 2022 a las 23:48
  • si no quieres lo anterior no uses el .append ..... usa .html, asi le estas añadiendo elementos a lo que ya tenias el 17 nov. 2022 a las 0:47
  • lo que tiene .html solo te retorna el último elemnto el 17 nov. 2022 a las 1:32

1 respuesta 1

0

Vas por buen camino.

Hice algunas modificaciones y comenté las líneas de código modificadas.

La idea es dejar el HTML del select_dinamico vacío en cada cambio del select_pricipal. Luego, declarar una variable vacía para contener los option en cada iteración del ciclo. Posteriormente se agregan los option a la variable y finalmente se asignan al select_dinamico las opciones que correspondan según el select_principal seleccionado.

$(document).ready(function() {
  let contenido1 = ['Frutas', 'Verduras', 'Hortalizas'];
  let contenido2 = ['Mesa', 'Cocina', 'Refrigerador'];

  $("#select_principal").on("change", function() {
    //Eliminar el html del select_dinamico
    $('#select_dinamico').html('');
    //Declarar la variable opciones que almacenará los option
    let opciones = '';
    
    let select_principal = $(this).val();

    if (select_principal === "Primer Select") {
      for (let i = 0; i < contenido1.length; i++) {
        //Agregar los option en cada iteración
        opciones += '<option>' + contenido1[i] + '</option>';
      }
    } else if (select_principal === "Segundo Select") {
      for (let i = 0; i < contenido2.length; i++) {
        //Agregar los option en cada iteración
        opciones += '<option>' + contenido2[i] + '</option>';
      }
    }
    //Asignar los option correspondientes
    $('#select_dinamico').html(opciones);
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <select name="" id="select_principal">
    <!-- se declara el primer option vacío y con el atributo hidden para que se oculte al hacer el primer cambio -->
    <option value="" hidden>Seleccione</option>
    <option value="Primer Select">Primer Select</option>
    <option value="Segundo Select">Segundo Select</option>
    <option value="tercer Select">tercer Select</option>
  </select>

  <select name="" id="select_dinamico">

  </select>
</div>

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.