JQuery Modal Dialog with drop-down list embedded

Question

I am kind of new to JavaScript but I have a requirement where I need a modal dialog to appear in the middle of the screen and also have a drop down list inside of it. Is there a simple way to do this? I haven't been able to find any examples online or on SO.

Here is what I have:

function showExportDialog() {
    console.log("In requestPanel.js ==> showExportDialog()");

    //initialize and open the dialog
    var $dialog = $('<div></div>').dialog({
        title:   'Export Dialog',
        modal: true,   //dims screen to bring dialog to the front
        buttons: {
            'Export As CSV': function() {
                exportAsCSV();
            },
            'Export As Tab Delimited': function() {
                exportAsTabDelimited();
            },
            'Export As Plain Text': function() {
                exportAsPlainText();
            }
        }
    });
}

When this function is called a modal dialog appears with three buttons that look like this:

I am hoping for something like this:

Any help would be appreciated.

Answer 1

This is definitely possible. Just put the element markup within the "" like this:

var $dialog = $('<div><select><option value="item1">item1</option></select></div>').dialog({

But what I would recommend is building the dialog contents in your page somewhere, starting them off hidden (css of 'display:none') and then call the .dialog method on them somewhere else.