Question

我有一个jQUery-confirm，我试图显示一些有select的内容，而我的select.selectMenu（）似乎不起作用，因为它显示在jQUery-confirm内。它只是显示默认选择。我可以在范围外的选择上轻松调用.selectMenu（），它将从select更改为selectmenu。例如：

HTML：

 <div id="aDiv"> 
     <select id="aSelect"> <option value="1"> 1 </option></select>
 </div>
 <button type="button" id="aButton">Click </button>

CSS：

#aDiv {
     display: none;
}

JS：

$(document).ready(function() {
  $('#aSelect').selectmenu();
  var divVar = $('#aDiv');
  $('#aButton').on("click", function() {
       $.confirm( {
            title: 'Hello',
            content: '',
            onOpen : function() {
                divVar.show();
                this.setContent(divVar);
            },
            onClose : function() {
               divVar.hide();
            }

         });
     });
 });

如何使jquery-confirm显示jquery ui小部件，如selectmenu？

Answer 1

请尝试以下方法：

您错过了 ID

的＃

$(document).ready(function() {
  $('#aSelect').selectMenu();
  var divVar = $('#aDiv');
  $('#aButton').on("click", function() {
       $.confirm( {
            title: 'Hello',
            content: '',
            onOpen : function() {
                divVar.show();
                this.setContent(divVar);
            },
            onClose : function() {
               divVar.hide();
            }

         });
     });
 });

Answer 2

试试这个，你需要在jconfirm中添加html标记并初始化selectMenu插件，最好在内容中编写标记而不是在外部定义标记。

$(document).ready(function() {
    // $('#aSelect').selectMenu();
    $('#aButton').on("click", function() {
        $.confirm( {
            title: 'Hello',
            content: function(){
                return $('#aDiv').html(); // put in the #aSelect html, 
            },
            onContentReady : function() {
                this.$content.find('#aSelect').selectMenu(); // initialize the plugin when the model opens.
            },
            onClose : function() {

            }
        });
    });
});

在jQuery中显示selectmenu确认

2 个答案: