Question

I am creating lots of select lists ( drop downs) when I build the page. The drop downs are based on external data files, so I set the id’s at runtime. Something like

<% name="TypeA" + specialIDString %>
<select  id="<%= name %>" >
blah
blah 
</select>

How do I then add an event listener, since I don’t know the ID ahead of time? Can I search the DOM for all id’s with “TypeA” in the id, and just add a listener to each one of them?

I know how to trigger an onLoad() method in javascript, after the page is loaded, I just want to know how to search the DOM to find ID’s with a particular string in them. Thanks.

Answer 1

Just for the record, the vanilla JavaScript answer:

function getElementsByIdStartsWith( type, idStartsWith ) {
    var arr = [],
        all = document.getElementsByTagName( type );

    for ( var i = 0; i < all.length; i++ ) {
        if ( all[i].id.indexOf( idStartsWith ) === 0 ) {
            arr.push( all[i] );
        }
    }

    return arr;
}

and then:

var selects = getElementsByIdStartsWith('select', 'TypeA');

Now you can use for loop to bind handlers to each element from the array.