Question

我正在尝试下拉，当它被选中时，它将在图片上方显示数据名称和图片下方的数据价格......我非常接近，你可以看到，但是因为某些原因我不能找出jQuery中$('option:selected', this).data('name')和$('option:selected', this).data('price')的正确位置，如果有人可以帮我解决这个问题，我将非常感谢!! http://jsfiddle.net/znnm74d5/

    <select name="SPECIAL" id="SPECIAL">
      <option>Please Select</div>
        <option 
           data-name="Animal Friend" 
           data-img="/images/img/AnimalFriend.png" 
           data-price="$30" 
           value="1">Animal Friend</option>
       <option 
           data-name="Aquaculture" 
           data-img="/images/img/Aquaculture.png" 
           data-price="$30" 
           value="2">Aquaculture</option>
       <option 
           data-name="Protect Our Oceans" 
           data-img="/images/img/ProtectOurOceans.png" 
           data-price="$30" 
           value="3">Protect Our Oceans</option>
       <option 
           data-name="Conserve Wildlife" 
           data-img="/images/img/ConserveWildlife.png" 
           data-price="$30" 
           value="4">Conserve Wildlife</option>
   </select>
    <!-- Modal -->
    <div class="modal fade" id="modal_special" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Specialty Plate</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-primary accept">Accept</button>
          </div>
        </div>
      </div>
    </div>

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

Answer 1

我刚刚使用调整后的

调整了Fiddle

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

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

更新以获取评论中的进一步请求：要显示标题而不是“图片将转到此处”：

$('#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'))

更新了Fiddle

Answer 2

$(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');
        });
});

JSFiddle：http://jsfiddle.net/znnm74d5/3/

Answer 3

你走了。更新了小提琴here。

$(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');
    });
});

迷你窗口弹出显示

3 个答案: