Display selectmenu inside jQuery confirm

i have a jQUery-confirm and im trying to display some content which have a select and my select.selectMenu() doesn't seem to work because it's being displayed inside the jQUery-confirm. It's just showing the default select.I can easily call .selectMenu() on a select outside the scope and it will change from select to a selectmenu. Example:

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

         });
     });
 });          

How do i make jquery-confirm show jquery ui widgets like selectmenu?

try this, you need to add html markup inside jconfirm and initialize the selectMenu plugin, its better to write the markup inside content instead of defining it outside.

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

            }
        });
    });
});