title: Detect if all three drop down menu has been selected
body: <p>I have three drop down menu's:</p>
  
  <pre><code>&lt;div class = "form=group"&gt;
  &lt;select class = "selecter" id = "day"&gt;&lt;option&gt;1&lt;option&gt;&lt;option&gt;2&lt;/option&gt;&lt;/select&gt;
  &lt;select class = "selecter" id = "month"&gt;&lt;option&gt;1&lt;option&gt;&lt;option&gt;2&lt;/option&gt;&lt;/select&gt;
  &lt;select class = "selecter" id = "year"&gt;&lt;option&gt;1&lt;option&gt;&lt;option&gt;2&lt;/option&gt;&lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to detect if all three fields have been selected so I can validate the date. I tried the following:</p>
  
  <pre><code>$('.selecter').on('change', function() {
  console.log("Something is changed!");
  });
  </code></pre>
  
  <p>But it fires up on each drop down. How can I add each function to it so I can detect after all selecter class has been changed? Also I can click on next drop down after one is selected? thanks to all</p>