Javascript 小窗口弹出显示

我试图有一个下拉列表，当它被选中时，它将显示图片上方的数据名称和图片下方的数据价格。。。正如您所看到的，我非常接近，但由于某些原因，我无法确定jQuery中$'option:selected'，this.data'name'和$'option:selected'，this.data'price'的正确位置。如果有人能帮我弄清楚这一点，我将不胜感激

我刚用调整过的尺寸调整了你的尺寸

 .append($('option:selected', this).data('name') + 
   '<br/><img alt="coming soon" src="' + 
   $('option:selected', this).data('img') + '"/><br/>' + 
   $('option:selected', this).data('price'))

并添加了一些虚拟图像来显示结果。我想你可以从那里调整一些CSS，因为我只是用来显示上面和下面的标题和价格

更新注释中的进一步请求：要显示标题而不是图像，请转到此处：

$('#modal_special').find('.modal-body').html('<p>' +
  $('option:selected', this).data('name') + '</p>')
  .append('<img alt="coming soon" src="' + 
  $('option:selected', this).data('img') + '"/><br/>' + 
  $('option:selected', this).data('price'))

更新

---

jshiddle:

给你。更新的小提琴

 .append($('option:selected', this).data('name') + 
   '<br/><img alt="coming soon" src="' + 
   $('option:selected', this).data('img') + '"/><br/>' + 
   $('option:selected', this).data('price'))

$('#modal_special').find('.modal-body').html('<p>' +
  $('option:selected', this).data('name') + '</p>')
  .append('<img alt="coming soon" src="' + 
  $('option:selected', this).data('img') + '"/><br/>' + 
  $('option:selected', this).data('price'))

$(function() {
        $('#SPECIAL').on('change', function() {
            var $selectedOption = $("#SPECIAL :selected");            
            var img = $selectedOption.attr('data-img');
            var price = $selectedOption.attr('data-price');

            $('#modal_special')
                .find('.modal-body').html('<p>Image will go here:</p>')
                .append('<img alt="coming soon" src="' + img + '"/>')
                .append('<p>' + price + '</p>')
                .end()
                .modal('show');
        });

        $('.accept').on('click',function() {
            //do something
            $('#modal_special').modal('hide');
        });
});

$(function() {
    $('#SPECIAL').on('change', function() {
        if ($('option:selected', this).is('[data-img]')) {

            $('#modal_special').find('.modal-title').html($('option:selected', this).data('name'));
            $('#modal_special').find('.modal-body').html('<p>Image will go here:</p>')
            .append('<img alt="coming soon" src="' + $('option:selected', this).data('img') + '"/>')
            .append('<br>' + $('option:selected', this).data('price'))
            .end().modal('show');
        }
    });
    $('.accept').on('click',function() {
        //do something
        $('#modal_special').modal('hide');
    });
});