2

Estoy intentando eliminar el atributo "selected" de la lista de opciones de un select pero no funciona. Si en cambio agrego el attributo con setAttribute si que va.

¿ Como tengo que hacer para eliminar este atributo ?

Ejemplo para agregar atributo en primer elemento de la lista:

document.getElementById("idSelect").options[0].setAttribute('selected','selected')

Pero si lo quiero eliminar no puedo poner "removeAttribute" porque no me funciona:

document.getElementById("idSelect").options[0].removeAttribute('selected')

Aqui pongo un ejemplo mas extenso del codigo que tengo, en principio quiero eliminar cualquier 'selected' que haya en los elementos del select:

document.getElementById("idSelect").options.forEach( function (e) { e.removeAttribute('selected'); });
8
  • Debería funcionarte, verifica que tengas bien el id del elemento y el elemento exista, sino proporciona parte del html del select
    – PsychoMx
    Commented el 17 jul. a las 14:34
  • 4
    Pégale un vistazo a esto, a ver si te sirve: jsfiddle.net/utb081mg La próxima vez pon un ejemplo mínimo verificable que podamos ver el contexto, pues funcionar funciona, aunque quizás no como te crees.
    – masterguru
    Commented el 17 jul. a las 14:37
  • @masterguru, me parece que el problema es justamente porque el elemento es el primero (posición 0). Al ser la primer opción no existe forma de que se visualice otra si no existe otra seleccionada.
    – Marcos
    Commented el 17 jul. a las 14:41
  • @Marcos con Edge me funciona pero con Chrome no !! He ahí el problema
    – Popularfan
    Commented el 17 jul. a las 14:53
  • @Popularfan, es raro, a mi el ejemplo de masterguru me funciona en ambos navegadores.
    – Marcos
    Commented el 17 jul. a las 14:53

2 respuestas 2

2

En javascript existen muchos tipos de objetos predefinidos y cada tipo cuenta con sus propias funciones. Y es así como un Array cuenta con la función forEach, pero los otros objetos ni siquiera los otros que son también colecciones deben tener por obligación la función forEach y es ese el error de tu código

Porque select.options es del tipo HTMLOptionsCollection el cual NO cuenta con una función forEach, por lo que no puedes utilizar dicha función.

Esto también pasa con selectores, por ejemplo:

  • getElementsByTagName retorna una HTMLCollection
  • querySelectorAll retorna NodeList (Este tipo de colección si tiene una función forEach)

En tu caso, puedes convertir select.options en un Array:

Array.from(document.getElementById("idSelect").options).forEach(e => e.removeAttribute('selected'));

Otra solución sería utilizar querySelectorAll que si tiene forEach

document.getElementById("idSelect").querySelectorAll("option").forEach(e => e.removeAttribute('selected'));

O también:

document.querySelectorAll("#idSelect > option").forEach(e => e.removeAttribute('selected'));

En resumen: Hay que tener cuidado con el tipo de datos que retornan los HTML

1
  • 1
    Otra opción es usar spread. Ejemplo [...document.getElementById("idSelect").options].forEach. PD: En este caso .options es opcional, pero por las dudas...
    – Marcos
    Commented el 18 jul. a las 14:13
0

El problema es que tenia un forEach para eliminar el "selected" y no funcionaba bien:

document.getElementById("idSelect").options.forEach( function (e) { e.removeAttribute('selected'); }); // Esto me daba error

Luego con la ayuda del código de @masterguru he visto que con un for() me funcionaba bien:

let options = document.getElementById("idSelect").getElementsByTagName('option');
for (var i = options.length; i--;) {
   document.getElementById("idSelect").options[i].removeAttribute('selected');
}

Para hacerlo con un forEach() debia escribirlo asi:

 let options = document.getElementById("idSelect").getElementsByTagName('option');
Array.prototype.forEach.call(options, e => { e.removeAttribute('selected') });

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.