0

Estoy haciendo un CRUD, a la hora de crear tengo un select multiple y quiero que se puedan seleccionar y guardar, pero el JS me devuelve undefined al ver que trae.

<option value="${item.id_curso}" class="curso_interes">${item.nombre}</option>

Hice un alert para poder ver el valor y me salta undefined

alert(document.getElementsByClassName("curso_interes").value)

1 respuesta 1

3

A ver si miramos un poquito más la documentación... Aunque en este caso incluso atendiendo al propio nombre del método uno se puede dar cuenta: getElementsByClassName().

El método getElementsByClassName() devuelve una colección de elementos, no un elemento. Por tanto, no puedes obtener la propiedad value directamente de esa colección.

Literalmente, esto es lo que devuelve, según la documentación: A live HTMLCollection of found elements.

Tendrías que recorrer la colección y mostrar el valor de cada elemento:

const elements = document.getElementsByClassName('curso_interes');
for (let i = 0; i < elements.length; i++) {
    alert(elements[i].value);
}

Tal vez te estás preguntando si existe un método getElementByClassName(), para obtener un único elemento. Y la respuesta es no, ya que puede haber varios elementos que tengan una misma clase, no tiene sentido, como por ejemplo sí lo tiene getElementById(), ya que se espera que sólo haya un elemento que tenga un determinado id.

Si en tu ejemplo sólo te interesan los elementos option seleccionados, y no todos, entonces puedes comprobar la propiedad selected:

const elements = document.getElementsByClassName('curso_interes');
for (let i = 0; i < elements.length; i++) {
    if (elements[i].selected) {
        alert(elements[i].value);
    }
}

Pero hay una forma aún más sencilla, que es mediante la propiedad selectedOptions de un elemento select múltiple. Por supuesto, primero tienes que obtener ese elemento, en vez de obtener los elementos según su class:

const elements = document.getElementById('idDeTuSelect').selectOptions;
3
  • 2
    +2 por A ver si miramos un poquito más la documentación...
    – Arriel
    Commented el 7 oct. 2022 a las 3:56
  • Ahi todo bien, pero me trae todas las opciones, que le tengo que agregar para que me traiga solo las seleccionadas? Commented el 7 oct. 2022 a las 15:48
  • Puedes saber si un elemento option está seleccionado o no mediante su propiedad selected. He editado la respuesta para mostrarlo. Commented el 7 oct. 2022 a las 22:35

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.