在 jQuery 内显示选择菜单 确认

Question

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

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() {

            }
        });
    });
});