title: Mini Window Pop Up Display
body: <p>I am trying to have a drop down that when it is selected it will display data-name above the picture and data-price underneath the picture... I am very close as you can see, but for somereason I can not figure out the proper placement inside of the jQuery for <code>$('option:selected', this).data('name')</code> and <code>$('option:selected', this).data('price')</code>  if someone could please help me figure this out it would be greatly appreciated!!<a href="http://jsfiddle.net/znnm74d5/" rel="nofollow">http://jsfiddle.net/znnm74d5/</a></p>
  
  <pre><code>    &lt;select name="SPECIAL" id="SPECIAL"&gt;
        &lt;option&gt;Please Select&lt;/div&gt;
          &lt;option 
             data-name="Animal Friend" 
             data-img="/images/img/AnimalFriend.png" 
             data-price="$30" 
             value="1"&gt;Animal Friend&lt;/option&gt;
         &lt;option 
             data-name="Aquaculture" 
             data-img="/images/img/Aquaculture.png" 
             data-price="$30" 
             value="2"&gt;Aquaculture&lt;/option&gt;
         &lt;option 
             data-name="Protect Our Oceans" 
             data-img="/images/img/ProtectOurOceans.png" 
             data-price="$30" 
             value="3"&gt;Protect Our Oceans&lt;/option&gt;
         &lt;option 
             data-name="Conserve Wildlife" 
             data-img="/images/img/ConserveWildlife.png" 
             data-price="$30" 
             value="4"&gt;Conserve Wildlife&lt;/option&gt;
     &lt;/select&gt;
      &lt;!-- Modal --&gt;
      &lt;div class="modal fade" id="modal_special" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Specialty Plate&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              ...
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                &lt;button type="button" class="btn btn-primary accept"&gt;Accept&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><br></p>
  
  <pre><code>$(function() {
          $('#SPECIAL').on('change', function() {
              if ($('option:selected', this).is('[data-img]')) {
                  $('#modal_special').find('.modal-body').html('&lt;p&gt;Image will go here:&lt;/p&gt;')
                  .append('&lt;img alt="coming soon" src="' + $('option:selected', this).data('img') + '"/&gt;')
                  .end().modal('show');
              }
          });
          $('.accept').on('click',function() {
              //do something
              $('#modal_special').modal('hide');
          });
      });
  </code></pre>