How to search by class (instead of id) in Javascript/jQuery

Question

I’m using a plugin for popular city/state, but I wanted to use in more than one select, so I wanted to use per class instead of ID, but what I tried so far didn’t work.

I tried to follow this famous Soen question, but it didn’t work in the script I’m using:

<script>
        window.onload = function() {

            new dgCidadesEstados({
                estado: document.getElementById('estado'),
                cidade: document.getElementById('cidade'),
                estadoVal: '<%=Request("estado") %>',
                cidadeVal: '<%=Request("cidade") %>'
            });
        }
    </script>

With id he works right, as you can see in this question, but I tried so for example { estado: document.getElementById('estrec').className = "estado", and putting the class in the select, but it didn’t work out.

Follows a FIDDLE that @Sergio posted in this answer (is with only two states).

Answer 1

Since this plugin expects one element at a time you can replace the getElementById for querySelector not taking into account that you should use . for class and # for ID.

So the same example with classes would be:

new dgCidadesEstados({
    estado: document.querySelector('.estado'),
    cidade: document.querySelector('.cidade'),
    estadoVal: '<%=Request("estado") %>',
    cidadeVal: '<%=Request("cidade") %>'
});

jsFiddle: http://jsfiddle.net/w938st7q/1/

If you want to apply this plugin to many selects just have a loop that passes elements one by one.

For example, for this HTML:

<form id="sistema" name="sistema" method="post" action="">
    <div>
        <label>Estado</label>
        <select class="estado" name="estado"></select>
        <label>Cidade</label>
        <select class="cidade" name="cidade"></select>
    </div>
    <div>
        <label>Estado</label>
        <select class="estado" name="estado"></select>
        <label>Cidade</label>
        <select class="cidade" name="cidade"></select>
    </div>
</form>

you can use it like this:

window.onload = function () {
    var divs = document.querySelectorAll('form > div');
    for (var i = 0; i < divs.length; i++) {
        new dgCidadesEstados({
            estado: divs[i].querySelector('.estado'),
            cidade: divs[i].querySelector('.cidade'),
            estadoVal: '<%=Request("estado") %>',
            cidadeVal: '<%=Request("cidade") %>'
        });
    }
}

jdFiddle: http://jsfiddle.net/w938st7q/2/

Answer 2

You can do this using jquery:

$(document).ready(function() {
 var elementoDaClasse = $(".nomeDaSuaClasse");
});

or use javascript without dependency in this way:

var elementoDaClasse = document.getElementsByClassName("nomeDaSuaClasse");