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
    el 5 ene. 2021 a las 20:57

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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