javascript - JQuery Modal Dialog with drop-down list and textarea embedded -

i'm new jquery forgive me if easy question.

i trying create dialog box, onclick event, comprises of:

1) drop down list 2) text area (height possibly 300px) 3) yes/no buttons

i have got stage can display dialog yes/no buttons, struggling include dropdown , textarea field.

current code:

function placeorder() {  if ($('#dialogdiv').length == 0) {     $('body').append("<div id='dialogdiv'><div/>"); }  var dialogdiv = $('#dialogdiv');  dialogdiv.attr("title", "are sure want place order."); dialogdiv.html("are sure want place order? please select delivery option drop down , enter special requirements in text field.");  dialogdiv.dialog({     modal : true,                    buttons : [             {                 text : "yes",                 class : 'green',                 click : function() {                     // functionality.                                       }             },             {                 text : "no",                 class : 'red',                 click : function() {                     // functionality.                 }             } ] }); 

}

if there better way of structuring dialog im happy hear.

thanks

-- update --------------------

thanks - seems have work still few issues.

i have created div element outside of body tag, yet, when page first loads, can see drop-down , text-area @ bottom of page. once dialog appears, , drop-down , text-areas displayed in dialog, yet, disappear bottom of page (as expected on page load) upon clicking no.

i thought because hadn't hid div on page load, tried with:

$("#dialogdiv").hide();  

although hides div on pageload, when dialog appears drop-down , text-area still hidden.

updated function:

function placeorder() {  if ($('#dialogdiv').length == 0) {  }  var dialogdiv = $('#dialogdiv');  dialogdiv.dialog({ modal : true,                buttons : [         {             text : "yes",             class : 'green',             click : function() {                 // functionality.                                   }         },         {             text : "no",             class : 'red',             click : function() {                 // functionality.             }         } ] }); 

updated html:

</body>      <div id="dialogdiv" title="are sure want place order.">         <p>are sure want place order? please select delivery option drop down , enter special requirements in text field.</p>         reason<select for="postage">             <option value="">please select...</option>             <option value="00111">fedex - 001</option>             <option value="00112">ups - 002</option>         </select>         <textarea id="details" name="details" class=" type="text" maxlength="760"></textarea>          </div> 

your javascript dialog call fine. in html markup, outside of body tag, create div element wrap dialog. div defined in html markup, can remove lines of javascript append,attr,html calls.

</body>  <div id="dialogdiv" title="are sure want place order">     <!-- define textarea , select here -->     <textarea/>     <select/> </div>  </html> 

with html outside of body tag, div hidden until called dialog method. can treat textarea , select other html element in javascript code.

update:

here's jsfiddle answer: http://jsfiddle.net/zms5n/

$("#dialogdiv").dialog({     autoopen: false });  // open dialog when user clicks button $("#mybutton").button().click(function() {     $("#dialogdiv").dialog("open"); }); 

basically, need create dialog() page loads. jquery ui, part of dialog initialization, not display div outside of dialog. setting autoopen property false prevent dialog opening. @ point, can call dialog open function open dialog @ leisure.