title: Get ID of Select Option Parent
body: <p>I've got a carousel of products that have multiple <code>select</code> controls and an image for each.  Each <code>select</code> element has the same change function:</p>
  
  <pre><code>                $('#abcFlavor')
                  .add('#furyFlavor')
                  .add('#mrpFlavor')
                  .add('#proFlavor')
                  .change(function () {
                      //some code...
              });
  </code></pre>
  
  <p>and here's a sample of the html:</p>
  
  <pre><code>    &lt;div class="shop-latest-carousel"&gt;
      &lt;ul id="latest_products"&gt;
          &lt;li&gt;
              &lt;form target="" action="..." method="post"&gt;
                  &lt;div class="product-list-item"&gt;
                      &lt;span class="hover"&gt;&lt;/span&gt;
                      &lt;div class="image" id="imageABC"&gt;
                          &lt;a&gt;
                              &lt;img id="ABC_grape" src="images/shop_images/ABC_grape.png" alt=""&gt;&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="details fixclear"&gt;
                          &lt;h3&gt;ABC&lt;/h3&gt;
                          &lt;label for="abcFlavor"&gt;Flavor:&lt;/label&gt;
                          &lt;select name="os0" id="abcFlavor"&gt;
                              &lt;option id="grape" value="Grape"&gt;Grape $2.99 USD&lt;/option&gt;
                              &lt;option id="peach" value="Peach"&gt;Peach $22.99 USD&lt;/option&gt;
                              &lt;option id="watermelon" value="Watermelon"&gt;Watermelon $12.99 USD&lt;/option&gt;
                              &lt;option id="cherry" value="Cherry"&gt;Cherry $12.99 USD&lt;/option&gt;
                              &lt;option id="lemonade" value="Lemonade"&gt;Lemonade $5.99 USD&lt;/option&gt;
                          &lt;/select&gt;
                          &lt;div class="actions"&gt;
                              &lt;input type="image" src="~/Images/shop_images/addToCart.png" name="submit" alt=""&gt;
                          &lt;/div&gt;
                          &lt;div class="price"&gt;
                              $&lt;span&gt;52.99&lt;/span&gt;
                              &lt;small&gt;$67.49&lt;/small&gt;
                              &lt;br /&gt;&lt;br /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;input type="hidden" name="on0" value="Flavors"&gt;
              &lt;/form&gt;
              &lt;!-- end ABC --&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;form target="" action="..." method="post"&gt;
                  &lt;div class="product-list-item"&gt;
                      &lt;span class="hover"&gt;&lt;/span&gt;
                      &lt;div class="image" id="imageFury"&gt;
                          &lt;a&gt;
                              &lt;img id="img_fury_lemonlime" src="images/shop_images/Fury_lemonlime.png" alt=""&gt;&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="details fixclear"&gt;
                          &lt;h3&gt;Fury&lt;/h3&gt;
                          &lt;label for="furyFlavor"&gt;Flavor:&lt;/label&gt;
                          &lt;select name="os0" id="furyFlavor"&gt;
                              &lt;option id="lemonline" value="Lemon-Lime"&gt;Lemon-Lime $19.99 USD&lt;/option&gt;
                              &lt;option id="melon" value="Melon"&gt;Melon $9.99 USD&lt;/option&gt;
                          &lt;/select&gt;
                          &lt;div class="actions"&gt;
                              &lt;input type="image" src="~/Images/shop_images/addToCart.png" name="submit" alt=""&gt;
                          &lt;/div&gt;
                          &lt;div class="price"&gt;
                              $&lt;span&gt;39.99&lt;/span&gt;
                              &lt;small&gt;$47.24&lt;/small&gt;
                              &lt;br /&gt;&lt;br /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;input type="hidden" name="on0" value="Flavors"&gt;
              &lt;/form&gt;
              &lt;!-- end Fury --&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I do a switch statement on the "id" of the <code>select</code> element that fired the event (not the "id" of the selected option)?</p>
  
  <p>I tried things like:</p>
  
  <pre><code>var sel = $(this).parent().attr("id");
  </code></pre>
  
  <p>but it keeps coming back 'undefined'.</p>