1

Hola a todos espero me puedan ayudar con esto

tengo en un formulario un select en el cual escojo un tipo de tramite

<option value=" ">Seleccione</option>
            <option value="NOVEDAD">NOVEDAD</option>
            <option value="DISCIPLINARIO">DISCIPLINARIO</option>
            <option value="DESCARGO LABORAL">DESCARGO LABORAL</option>
            <option value=" ">OTRA</option> </select>

y en otro me gustaria mostrar cuales son los diferentes documentos segun la selección, pero me gustaria que fuera usando un datalist asi por ejemplo

<input list="brow" name="tipo_novedad" type="text" id="tipo_novedad" size="50" maxlength="250">
          <datalist id="NOVEDAD">
  <option value="CEDULA DE CIUDADANIA">
  <option value="LICENCIA DE CONDUCCION">
  <option value="HOJA DE VIDA Y SOPORTES">
  <option value="ACTUALIZACION INFORMACION HOJA DE VIDA">
  <option value="SOLICITUD EXAMEN DE INGRESO">
  <option value="SOLICITUD EXAMEN DE EGRESO">

como hago para que al seleccionar en el primer select en automatico sin refresacar la ventana cambien las opciones segun la seleccion en el datalist por ejemplo

<datalist id="DISCIPLINARIO">
  <option value="CEDULA DE CIUDADANIA">

<datalist id="NOVEDAD">
  <option value="HOJA DE VIDA Y SOPORTES">
  <option value="ACTUALIZACION INFORMACION HOJA DE VIDA">
  <option value="SOLICITUD EXAMEN DE INGRESO">

<datalist id="OTRA">
  <option value="LICENCIA DE CONDUCCION">
  <option value="HOJA DE VIDA Y SOPORTES">
  <option value="SOLICITUD EXAMEN DE INGRESO">
  <option value="SOLICITUD EXAMEN DE EGRESO">
6
  • que has intentado? Commented el 11 jun. a las 1:58
  • 1
    ¿Responde esto a tu pregunta? dos select seguidos Commented el 11 jun. a las 2:01
  • @Ruslan, la pregunta que propones como duplicada se basa en selects, involucra PHP y llamadas al servidor, no veo cómo puede ser equivalente a esta, que es mucho más simple.
    – jachguate
    Commented el 12 jun. a las 7:03
  • @jachguate si observas tiene la etiqueta php, por lo que el OP espera una respuesta que no solamente use options sino que involucre al servidor Commented el 12 jun. a las 15:18
  • @Ruslan, entiendo que lo veas así, pero tomando en cuenta que la pegunta no lo menciona, ni lo hace la respuesta aceptada, tiendo a pensar que la etiqueta está de más. Me temo que la pregunta termine cerrada como duplicada, por estar ya en la cola de revisión, cuando en realidad no lo es. Sugiero que evalúes retirar tu voto de cierre, a ver si eso la aleja de allí., si es que logras coincidir con mi análisis. Abona a él el hecho que tiene las etiquetas css y jquery también, cuando claramente no son parte del tema. Un saludo.
    – jachguate
    Commented el 12 jun. a las 15:38

1 respuesta 1

2

Solo tienes que redefinir el atributo list del input, para esto usas setAttribute.

El momento para redefinirlo, es cuando el select cambian, entonces utilizas el evento change

Para facilitar el asunto, te recompiendo poner en los values del select, exactamente el mismo id que has puesto en tu datalist

Puedes hacerlo inline en el mismo select

<select onchange="tipo_novedad.setAttribute('list',this.value)">

<select onchange="tipo_novedad.setAttribute('list',this.value)">
  <option value="lista1">lista1</option>
  <option value="lista2">lista2</option>
  <option value="lista3">lista3</option>
</select>

<input list="lista1" name="tipo_novedad" type="text" id="tipo_novedad" size="50" maxlength="250">

<datalist id="lista1">
  <option value="CEDULA DE CIUDADANIA">
  <option value="LICENCIA DE CONDUCCION">
  <option value="HOJA DE VIDA Y SOPORTES">
</datalist>

<datalist id="lista2">
  <option value="HOJA DE VIDA Y SOPORTES">
  <option value="ACTUALIZACION INFORMACION HOJA DE VIDA">
  <option value="SOLICITUD EXAMEN DE INGRESO">
</datalist>

<datalist id="lista3">
  <option value="LICENCIA DE CONDUCCION">
  <option value="HOJA DE VIDA Y SOPORTES">
  <option value="SOLICITUD EXAMEN DE INGRESO">
  <option value="SOLICITUD EXAMEN DE EGRESO">
</datalist>

o Usar addEventListener

const tipo_novedad = document.getElementById("tipo_novedad");
const select =  document.getElementById("unSelect");

unSelect.addEventListener("change", function(){
  tipo_novedad.setAttribute('list',this.value)
});
<select id="unSelect">
  <option value="lista1">lista1</option>
  <option value="lista2">lista2</option>
  <option value="lista3">lista3</option>
</select>

<input list="lista1" name="tipo_novedad" type="text" id="tipo_novedad" size="50" maxlength="250">

<datalist id="lista1">
  <option value="CEDULA DE CIUDADANIA">
  <option value="LICENCIA DE CONDUCCION">
  <option value="HOJA DE VIDA Y SOPORTES">
</datalist>

<datalist id="lista2">
  <option value="HOJA DE VIDA Y SOPORTES">
  <option value="ACTUALIZACION INFORMACION HOJA DE VIDA">
  <option value="SOLICITUD EXAMEN DE INGRESO">
</datalist>

<datalist id="lista3">
  <option value="LICENCIA DE CONDUCCION">
  <option value="HOJA DE VIDA Y SOPORTES">
  <option value="SOLICITUD EXAMEN DE INGRESO">
  <option value="SOLICITUD EXAMEN DE EGRESO">
</datalist>

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.