How to add Dropdown in Jquery Ui dialogue

Question

I have a jquery ui dialogue box.Now as per my requirement ,i want to add textbox,dorpdown menu ,Checkboxe into dialogue bos but i dont know how to do it..

Here is my dialogue box code that gets open On click event..

 var dialog = $('<p>This is my Dialogue</p>').dialog({
            buttons: {
                "Submit": function () {
                    //Your submit handler
                }
            },
            title:'Your title',
            width: 600,
            height:300,
        });

Thank you very much..

Answer 1

The easiest way is to setup the content inside a div and display that inside the dialog. So instead of passing the dialog content as a string like you tried it:

$('<p>This is my Dialogue</p>').dialog({ ... });

Setup the dialog content like this:

<div class="popup">
    <p>This is my Dialogue</p>

    <!-- Add whatever code you like here to be displayed-->
    <textarea></textarea>
    <select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>

And bind the dialog to that element:

$('.popup').dialog({
    buttons: {
        "Submit": function () {
            //Your submit handler
        }
    },
    title:'Your title',
    width: 600,
    height:300,
});

Here is a basic working example: http://jsfiddle.net/W7zvZ/. A more complex example of using forms can be found on the jQuery UI Dialog Docs page (just click on the View Source link here to see the code behind it).