Question

是否可以在表单上下拉，当用户选择其中一个值弹出打开时？我想要做的是下降大约125.当用户选择一个它将弹出一个显示图片和价格的迷你窗口..每个值将是一个不同的弹出窗口？有没有人尝试过这样的事情？一旦他们选择了复选标记，它就会关闭，或者如果他们不喜欢它们，他们可以点击顶部的X.我从哪里开始？任何例子都将非常感谢！

<select name="SPECIAL" id="SPECIAL" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Answer 1

正如非常简化的示例Fiddle

$("#SPECIAL").change(function () {
  $("div.info").hide();
  $("#win" + $(this).val()).show();
});
$(".close").click(function () {
  $(this).parent("div").hide();
});

使用class＆＃34; info＆＃34;显示div包含div类和＃34;关闭＆＃34;包含＆＃34; X＆＃34;。

Answer 2

你想要这样的东西：DEMO？

$(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 3

您可以使用jquery ui打开一个对话框窗口（jquery-ui）并触发您选择的更改事件，如：

$("SPECIAL").on("change", function(){
    //here goes the code to open dialog
});

下拉值打开不同的迷你窗口

3 个答案: