title: JQuery Modal Dialog with drop-down list and textarea embedded
body: <p>I'm new to jQuery so forgive me if this is an easy question.</p>
  
  <p>I am trying to create a dialog box, from an onClick event, that comprises of:</p>
  
  <p>1) A drop down list
  2) A text area (height possibly 300px)
  3) Yes/No buttons</p>
  
  <p>I have got to the stage where i can display a dialog with the Yes/No buttons, however i am struggling to include a dropdown and textarea field.</p>
  
  <p>Current code:</p>
  
  <pre><code>function placeOrder() {
  
  if ($('#dialogDiv').length == 0) {
      $('body').append("&lt;div id='dialogDiv'&gt;&lt;div/&gt;");
  }
  
  var dialogDiv = $('#dialogDiv');
  
  dialogDiv.attr("Title", "Are you sure you want to place this order.");
  dialogDiv.html("Are you sure you want to place this order? Please select delivery option from the drop down and enter any special requirements in the text field.");
  
  dialogDiv.dialog({
      modal : true,               
      buttons : [
              {
                  text : "Yes",
                  class : 'Green',
                  click : function() {
                      // Some functionality.                      
                  }
              },
              {
                  text : "No",
                  class : 'Red',
                  click : function() {
                      // Some functionality.
                  }
              } ]
  });
  </code></pre>
  
  <p>}</p>
  
  <p>If there is a better way of structuring my dialog im happy to hear.</p>
  
  <p>Thanks</p>
  
  <p>-- UPDATE --------------------</p>
  
  <p>Thanks - That seems to have work but are still a few issues.</p>
  
  <p>I have created the div element outside of the body tag, yet, when the page first loads, i can see the drop-down and text-area at the bottom of the page. Once the dialog appears, and the drop-down and text-areas are displayed in the dialog, yet, they disappear from the bottom of the page (As i expected on page load) upon clicking No.</p>
  
  <p>I thought it was because i hadn't hid the div on page load, tried with: </p>
  
  <pre><code>$("#dialogDiv").hide(); 
  </code></pre>
  
  <p>Although that hides the div on PageLoad, when the dialog appears the drop-down and text-area are still hidden.</p>
  
  <p>Updated function:</p>
  
  <pre><code>function placeOrder() {
  
  if ($('#dialogDiv').length == 0) {
  
  }
  
  var dialogDiv = $('#dialogDiv');
  
  dialogDiv.dialog({
  modal : true,               
  buttons : [
          {
              text : "Yes",
              class : 'Green',
              click : function() {
                  // Some functionality.                      
              }
          },
          {
              text : "No",
              class : 'Red',
              click : function() {
                  // Some functionality.
              }
          } ]
  });
  </code></pre>
  
  <p>Updated HTML:</p>
  
  <pre><code>&lt;/body&gt;
  
      &lt;div id="dialogDiv" title="Are you sure you want to place this order."&gt;
          &lt;p&gt;Are you sure you want to place this order? Please select delivery option from the drop down and enter any special requirements in the text field.&lt;/p&gt;
          Reason&lt;select for="postage"&gt;
              &lt;option value=""&gt;Please select...&lt;/option&gt;
              &lt;option value="00111"&gt;Fedex - 001&lt;/option&gt;
              &lt;option value="00112"&gt;UPS - 002&lt;/option&gt;
          &lt;/select&gt;
          &lt;textarea id="details" name="details" class=" type="text" maxlength="760"&gt;&lt;/textarea&gt;     
      &lt;/div&gt;
  </code></pre>