How to determiine which dropdown was used

Question

I have a form with more than one dropdown list, like this below. I can see how to get the ID's of each dropdown but I can't figure out how to get the one that was actually used. Would someone explain how to do that, please.

  <div>
   <select name="id[11]" class="pullDown" id="attrdrop0">
    <option class="pink" value="31`">No</option>
    <option class="pink" value="32">Yes (+$40.00)</option>
   </select>
  </div> 

  <div>
   <select name="id[10]" class="pullDown" id="attrdrop1">
    <option class="pink" value="31">No</option>
    <option class="pink" value="32">Yes (+$150.00)</option>
   </select>
  </div> 

<script>  
$(function () {
   $("#prices").change(function () {
     console.log('A change was made');
     CalculatePrice();  
  });
});  

function CalculatePrice() {
    var ttl_price = 0;
    var id = '';

    $(":input.select, :input").each(function() {
       var cur_price = $('option:selected', $(this)).text();
       ttl_price += cur_price;    

       id = $(this).attr('id');
       /*** What now ***/
    });  
    SetPrice(id, ttl_price);    
}  
</script>

Answer 1

You can pass the control as a parameter to CalculatePrice.

$(function () {
   $("#prices").change(function () {
     console.log('A change was made');
     CalculatePrice(this);  
  });
});  

function CalculatePrice(triggerObject) {
    var ttl_price = 0;
    var id = '';

    $(":input.select, :input").each(function() {
       var cur_price = $('option:selected', $(this)).text();
       ttl_price += cur_price;    

       id = $(this).attr('id');
       /*** What now ***/
       if (triggerObject.id) {...}
    });  
    SetPrice(id, ttl_price);    
}  
</script>