0

necesito cargar un select, dependiendo de la opción seleccionada en otro select. Necesito hacerlo con jquery. Ambos selects son exactamente iguales, solo cambiaria el id y nombre, tienen las mismas opciones, pero estan en diferentes pestañas.

El primer select es este:

<select name="tiponorma_txt" id="tiponorma_txt" style="margin-left: 0px;" class="ui-widget-content">
  <option value="">Seleccione...</option>
  <option value='CIR'>Circular</option>
  <option value='NCG'>Norma de Caracter General</option>
  <option value='OFC'>Oficio Circular</option>
  <option value='RES'>Resolucion</option>
  <option value='OFO'>Oficio</option>
  <option value='DSU'>Decreto Supremo</option>
</select>

y el segundo select es exactamente el mismo, solo que debe cambiarse a la misma opción que fue marcada en el primero, por ejemplo si elijo la opción 'Circular' en el primero, esta debe cambiarse a 'Circular' en el segundo select:

<select name="tiponorma_dirigida" id="tiponorma_dirigida" style="margin-left: 0px;" class="ui-widget-content">
  <option value="">Seleccione...</option>
  <option value='CIR'>Circular</option>
  <option value='NCG'>Norma de Caracter General</option>
  <option value='OFC'>Oficio Circular</option>
  <option value='RES'>Resolucion</option>
  <option value='OFO'>Oficio</option>
  <option value='DSU'>Decreto Supremo</option>
</select>

De antemano muchas gracias.

1 respuesta 1

1

Puedes hacer esto de la siguiente manera

$("#select1").on("change", () => {
  $("#select2").val($("#select1").val());
});

$("#select2").on("change", () => {
  $("#select1").val($("#select2").val());
});
body, html {
  padding:20px;
}

select {
  border:solid 1px #c6c6c6c1;
  padding:10px;
  background:#fff;
  outline:none;
  border-radius:8px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Select</title>
  </head>
  <body>
    <select name="hello" id="select1">
      <option value="abc">Abc</option>
      <option value="def">def</option>
    </select>
    <select name="hello2" id="select2">
      <option value="abc">Abc</option>
      <option value="def">def</option>
    </select>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
  </body>
</html>

Esto hará que cada vez que se cambie el valor del select 1, lo cambie también en el select 2.

1
  • muchas gracias, va perfecto!!
    – Hector
    Commented el 5 ene. 2021 a las 20:57

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.