title: How to target data attribute of a select option?
body: <p>I'm trying to make an image change based on the <code>dropdown/select</code> option that a user chooses. However, I need to do this using a <code>data</code> attribute rather than the easier <code>option</code> value, since I need that to be used for something else. I can't seem to figure out what I'm doing wrong. The code I've attached doesn't target the <code>data-image</code> attribute. And ideas what I'm doing wrong? </p>
  
  <p>Example Code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;div&gt;
      *Flavor 1:
  &lt;/div&gt;
  &lt;div&gt;
      &lt;select class="custom-cupcake-flavor" name="custom-cupcake-flavor"&gt;
          &lt;option data-image="noimage.jpg" value=""&gt;-- Please Choose an Option --&lt;/option&gt;
          &lt;option data-image="Chocolate-Covered-Strawberry.jpg" value="Chocolate Swirl"&gt;Chocolate Swirl&lt;/option&gt;
          &lt;option data-image="strawberryLemonade.jpg" value="Extreme Lemon"&gt;Extreme Lemon&lt;/option&gt;
          &lt;option data-image="Cookie-Dough-Delight.jpg" value="Vanilla Blast"&gt;Vanilla Blast&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  
  &lt;br&gt;
  
  &lt;div class="col-md-6"&gt;
      &lt;img id="uploadedImage" src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=400%C3%97400&amp;w=400&amp;h=400"&gt;
      &lt;br&gt;
  
  &lt;/div&gt;
  &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  &lt;script type='text/javascript'&gt;
      $(document).ready(function() {
          var flavor;
          var image_name;
  
          $(".custom-cupcake-flavor").on('change', function() {
              flavor = $(this).data("image");
              image_name = ("/images/" + flavor);
  
              $('#uploadedImage').fadeOut(200, function() {
                  $('#uploadedImage').attr('src', image_name).bind('onreadystatechange load', function() {
                      if (this.complete) $(this).fadeIn(400);
                  });
              });
          });
  
      });
      &lt;!-- Hides Product Image when "No image" option is selected.--&gt;
      $(document).ready(function() {
          $('.custom-cupcake-flavor').on('change', function() {
              if (this.val() !== "") {
                  $("#uploadedImage").hide();
              } else {
                  $("#uploadedImage").show();
              }
          });
      });
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>