title: JQuery select in dialog does not have options appended
body: <p>I am trying to use a JQuery dialog to act similar to an open file dialog, but instead of files I am using records from a database to populate the dialog.</p>
  
  <p>The problem that I am having is that I cannot seem to get the html option data loaded into the html select in my dialog. I have used the Google Javascript debugger in Chrome and have stepped through my javascript code which is called from my PHP ajax. I see no errors and I see the data is there and formatted correctly when I put it into the append statement.  I don't understand why it does not show up in my html select. </p>
  
  <p>Thanks for your help.</p>
  
  <p>below is my Ajax function which receives the data.</p>
  
  <p>function doOpenAjax(filterStr) 
      {</p>
  
  <pre><code>    $.get(
          "contenteditServerAjax.php",
          {filter: filterStr },
          function(data) {
                              var optsArr = data.split('|~|');
                              var seloption = "";
  
                              $.each(optsArr, function(i) {
                                  seloption += '&lt;option value="' + optsArr[i] + '"&gt;' + optsArr[i] + '&lt;/option&gt;';
                              });
                              $('#chooseArticleName2').find('option').remove().end();
                              $('#chooseArticleName2').append(seloption);
                          },
          "html"
          );
  
  }
  </code></pre>
  
  <p>For reference this is part of my php which contains the jquery dialog:</p>
  
  <pre><code>&lt;head&gt;
  &lt;script&gt;
  $(document).ready(function() {
  
      var dlg = $("#opendiv").dialog({modal:true, height:550, width:650,
                          hide:{ effect: 'drop', direction: "down" },
                          autoOpen:false,
                          maxHeight: 1200,
                          maxWidth: 1200,  
                          minHeight: 250,
                          minWidth: 300, 
                          buttons: { "Open": function() { $('#state').val('Open Doc');        $('#contentform').submit(); $(this).dialog("hide"); },
                          "Cancel": function() { $(this).dialog("close");}}                            
      });
      dlg.parent().appendTo($("#contentform"));  
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;div id="opendiv" name="opendiv" title="OPEN"&gt;
  
      &lt;p align="center"&gt;Enter Name to Open Article as:&lt;/p&gt;
      &lt;p&gt;
          Filter:
          &lt;input name="docFilter2" id="docFilter2" type="text" value="$filter2" maxlen="64" size="28"/&gt;&amp;nbsp; &amp;nbsp;
          &lt;input name="LoadTitles2" id="LoadTitles2" type="button" value="Load Available Titles" 
                                  onclick="doOpenAjax( $('#docFilter2').val() );"/&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;div id="ajaxOutput2"&gt;
              &lt;select name="chooseArticleName2" id="list2" size="8" style="min-width:92%"
                                          onchange="
                                          var mytext = $('#chooseArticleName2 :selected').text();
                                          $('#textBoxArticleName2').val(mytext);"&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/p&gt;
      &lt;p&gt;
          Document:
          &lt;input type="text" id="textBoxArticleName2" name="textBoxArticleName2" size="56"/&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>