Question

I’ve got a load of dropdowns on a html page and I want to fire events when they change (eventually it’ll be updating all of the dropdowns with content through ajax) – but for now i’m just trying to make it alert out the data element i’ve selected. I don’t want it to fire on every drop down on the page, just the ones with the corresponding css class. I.e. group1 group2. The groups will have to be dynamic too as I don’t know how many there could be.

http://jsfiddle.net/6BakA/

Theres a js fiddle above with how it is at the moment. I expect it to only alert 4 times the when you change one of the first 4 dropdowns and only twice when you do the second. But clearly i’m doing something wrong!

My html is:

<select id="test1" class="group1" data-type="Select Box 1">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 

        <select id="test1" class="group1" data-type="Select Box 2">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 

        <select id="test1" class="group1" data-type="Select Box 3">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 

            <select id="test1" class="group1" data-type="Select Box 4">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 

        <select id="test1" class="group2" data-type="Select Box 5">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 

        <select id="test1" class="group2" data-type="Select Box 6">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 

My JS is:

$(document).ready(function() {

        $('select').change(function() {

            $('.group1').each(function() {
               alert($(this).data('type'));
            });


            $('.group2').each(function() {
               alert($(this).data('type'));
            });


        });    

    });

Answer 1

You can do it like this

$(document).ready(function() {
   $('select').change(function() { // <-- bind events to all selects    
        $('.'+$(this).attr('class')).each(function(){  // <-- iterate through each element that has same class
// you don't need to know the class - just use the current element's class that triggered the event
            alert($(this).data('type')); 
            // do what you need to here
        });
    });
});​

http://jsfiddle.net/wirey00/6BakA/4/

Or even better since you don’t know how many selects there’ll be, delegating the event will be more efficient since the parent element will be listening and handling the event. You can replace body with any parent element of the select boxes that’s available when the dom is loaded

$('body').on('change','select',function(){ 
        $('.'+$(this).attr('class')).each(function(){  
            alert($(this).data('type')); 
            // do what you need to here
        });
});

http://jsfiddle.net/wirey00/6BakA/5/