GetElementsByClassName() ne fonctionne pas

Question

Le code suivant est destiné à trier les options de la liste de formulaires par ordre alphabétique, mais 'getElementsByClassName()' ne fonctionne pas et je ne peux pas comprendre pourquoi.

J'utilise la dernière version de jQuery.

window.onload=function(){
    function sortlist() {
        var cl = document.getElementsByClassName('car_options');
        var clTexts = new Array();

        for(i = 1; i < cl.length; i++) {
            clTexts[i-1] =
                cl.options[i].text.toUpperCase() + "," +
                cl.options[i].text + "," +
                cl.options[i].value;
    }   
    clTexts.sort();

    for(i = 1; i < cl.length; i++) {
        var parts = clTexts[i-1].split(',');
        cl.options[i].text = parts[1];
        cl.options[i].value = parts[2];
    }
    sortlist();
}

dans la section corps

            Par marque
            Vauxhall
            BMW
            Toyota
            Lexus
            Audi
            Ford

                  Par couleur

            Rouge
            Bleu
            Noir
            Gris

Answer 1

Utilisez document.getElementsByClassName('car_options')[0]

getElementsByClassName retourne un ensemble d'éléments qui possèdent tous les noms de classe donnés.

Si vous avez plusieurs éléments, alors nous devons les parcourir. comme

var elements = document.getElementsByClassName('car_options');
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {

    }, false);
}

Note : Dans IE, c'est supporté sur IE9+

MODIFIER

Code mis à jour

function sortlist() {
    var elements = document.getElementsByClassName('car_options');
    for (var j = 0; j < elements.length; j++) {
        var cl = elements[j];
        var clTexts = new Array();

        for (i = 1; i < cl.options.length; i++) {
            clTexts[i - 1] = cl.options[i].text.toUpperCase() + "," + cl.options[i].text + "," + cl.options[i].value;
        }
        clTexts.sort();

        for (i = 1; i < cl.options.length; i++) {
            var parts = clTexts[i - 1].split(',');
            cl.options[i].text = parts[1];
            cl.options[i].value = parts[2];
        }
    }
}

Démonstration fonctionnelle

Answer 2

Votre logique est erronée.

Vous itérez sur cl (qui est la collection de toutes les listes déroulantes).

Puis vous accédez aux options de chaque liste par le même index. Votre code produit une exception de dépassement de tableau.