getElementsByClassName() is not working [duplicate]

Answer 1

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

getElementsByClassName returns a set of elements which have all the given class names.

If you have multiple elements then we have to iterate it through. like

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

    }, false);
}

Note: In IE it is supported on IE9+

EDIT

Updated Code

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];
        }
    }
}

Working Demo

Answer 2

Your logic is wrong.

You are iterating over cl(which is the collection of all select lists).

Then accessing options of each list by the same index. Your code produces array out of bounds exception