在 jQuery 确认中显示选择菜单

Question

我有一个 jQUery-confirm，我试图显示一些有选择的内容，而我的 select.selectMenu() 似乎不起作用，因为它显示在 jQUery-confirm 内。它只是显示默认选择。我可以轻松地在范围外的选择上调用 .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 小部件，例如选择菜单？

Answer 1

试试这个，你需要在 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() {

            }
        });
    });
});  

Answer 2

请尝试以下方法：

您错过了 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();
            }

         });
     });
 });