0

Buenos días comunidad!

Tengo una duda. Necesito recorrer varios select, y obtener la option seleccionada en cada uno. Cada select tiene un id diferente que no puedo saberlo ya que es el id de una tabla de donde obtengo los datos, también la cantidad, puede haber un select como también pueden haber 200.

HTML

                    <table id="tablaDeLicencia" class="table table-condensed table-striped">
                   <thead>
                        <tr>
                            <th>Funcionario</th>
                            <th>Documento</th>
                            <th>Area</th>
                            <th>Periodo</th>
                            <th>Dias</th>
                            <th>Solicitado</th>
                            <th>Aprobacion</th>
                        </tr>
                    </thead>
                    <tbody> 
                        {% for solicitud in solicitudes %}                  
                            <tr class="hidde-odd">
                                <td class="acot-xgr-gr1">{{ solicitud.nombre_solicitud }}</td>
                                <td class="acot-xgr-gr1">{{ solicitud.documento_solicitud }}</td>
                                <td class="acot-xgr-gr1">{{ solicitud.area_solicitud }}</td>
                                <td class="acot-xgr-gr1">{{ solicitud.periodo_solicitud }}</td>
                                <td class="acot-xgr-gr1">{{ solicitud.cantidad_solicitud }}</td>
                                <td class="acot-xgr-gr1">{{ solicitud.fecha_solicitud }}</td>
                                <td class="acot-xgr-gr1">
                                    <select name="estadoSolicitud" id="{{ solicitud.id_solicitud }}">
                                      <option value="0" selected="true">En Espera</option>
                                      <option value="1">Aprobar</option>
                                      <option value="2">No Aprobar</option>
                                    </select>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>

JS

function actualizarSolicitudes(){
   document.querySelectorAll('#tablaDeLicencia input[type=select]').forEach(function(checkElement) {
       if(checkElement.checked == true){
            count++;
        }
    });

}

desde ya, muchas gracias.

Saludos

5
  • Qué has intentado? Pon el código que tienes
    – RoyalUp
    el 26 oct. 2022 a las 13:47
  • Puse los códigos el 26 oct. 2022 a las 13:53
  • Esto es lenguaje php? el 26 oct. 2022 a las 13:56
  • La obtención de los Selected lo quiero hacer desde JS, de php traigo los datos para imprimir en el html el 26 oct. 2022 a las 14:01
  • Cuando creas los select puedes añadir el atributo name y dejarles el mismo nombre a todos, cuando quieras acceder a ellos los haces const selects= document.getElementsByName("select_name"); esto te va a crear un arreglo de objetos, y los vas a poder manipular como un arreglo. Fuente
    – Robinson
    el 26 oct. 2022 a las 14:08

2 respuestas 2

1

Ya casi lo tenias, con el código de muestra que hay más abajo puedes ver cual es la opción seleccionada de cada uno de los select.

Básicamente los cambios han sido:

  • Usar como selector a buscar esto:
#tablaDeLicencia select
  • Y una vez encontrados, aprovechando el forEach que ya tenias, tan solo necesitas usar selectedIndex para descubrir cual está seleccionado (en caso de que no haya ningun option aparecerá -1).
el.selectedIndex

Ejemplo completo

function actualizarSolicitudes() {
  document.querySelectorAll('#tablaDeLicencia select').forEach(function(el) {
    console.log(el.selectedIndex)
  });
}
actualizarSolicitudes()
<table id="tablaDeLicencia" class="table table-condensed table-striped">
  <thead>
    <tr>
      <th>Funcionario</th>
      <th>Documento</th>
      <th>Area</th>
      <th>Periodo</th>
      <th>Dias</th>
      <th>Solicitado</th>
      <th>Aprobacion</th>
    </tr>
  </thead>
  <tbody>
    <tr class="hidde-odd">
      <td class="acot-xgr-gr1">nombre</td>
      <td class="acot-xgr-gr1">documento</td>
      <td class="acot-xgr-gr1">area</td>
      <td class="acot-xgr-gr1">periodo</td>
      <td class="acot-xgr-gr1">cantidad</td>
      <td class="acot-xgr-gr1">fecha</td>
      <td class="acot-xgr-gr1">
        <select name="estadoSolicitud" id="id_solicitud1">
          <option value="0" selected="true">En Espera</option>
          <option value="1">Aprobar</option>
          <option value="2">No Aprobar</option>
        </select>
      </td>
    </tr>
    <tr class="hidde-odd">
      <td class="acot-xgr-gr1">nombre1</td>
      <td class="acot-xgr-gr1">documento1</td>
      <td class="acot-xgr-gr1">area1</td>
      <td class="acot-xgr-gr1">periodo1</td>
      <td class="acot-xgr-gr1">cantidad1</td>
      <td class="acot-xgr-gr1">fecha1</td>
      <td class="acot-xgr-gr1">
        <select name="estadoSolicitud" id="id_solicitud2">
          <option value="0">En Espera</option>
          <option value="1" selected>Aprobar</option>
          <option value="2">No Aprobar</option>
        </select>
      </td>
    </tr>
    <tr class="hidde-odd">
      <td class="acot-xgr-gr1">nombre2</td>
      <td class="acot-xgr-gr1">documento2</td>
      <td class="acot-xgr-gr1">area2</td>
      <td class="acot-xgr-gr1">periodo2</td>
      <td class="acot-xgr-gr1">cantidad2</td>
      <td class="acot-xgr-gr1">fecha2</td>
      <td class="acot-xgr-gr1">
        <select name="estadoSolicitud" id="id_solicitud3">
        </select>
      </td>
    </tr>
  </tbody>
</table>

2
  • Muchas gracias masterguru! el id lo obtengo con el.id el 26 oct. 2022 a las 16:00
  • Perdón, me confundí de id, pensé que el de la tabla se repetia, fallo mio, olvida lo que he dicho.
    – masterguru
    el 26 oct. 2022 a las 16:09
1

Lo que se me ocurre que puedes hacer es traerte todos los elementos OPTION que tienen un atributo selected = true.

Puedes iterar por cada opción y obtener su select padre por si quieres saber a que select pertenece.

var selected_options = document.querySelectorAll('option[selected="true"]')

var selects = []

selected_options.forEach(option => {
    selects.push(option.parentNode)
})
1
  • 1
    Esto es incorrecto: Como tal el elemento que devuelve querySelectorAll no tiene método forEach.. Revisa su documentación y lo verás.
    – masterguru
    el 26 oct. 2022 a las 15:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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