title: Can't retrieve selected value from dropdown in dialog using jquery
body: <p>I have a dialog popup with a few fields in them. This dialog is retrieved from a php file.
  I can get the val() from all of them but the  dropdowns.</p>
  
  <p>Snippets:</p>
  
  <p><strong>Call dialog:</strong></p>
  
  <pre><code>$('#createNote').click(function(e){
    e.preventDefault();
    $.ajax({  url: 'functions.php',
              type: 'POST',
              data: {"function": "createNoteDialog"},
              success: function(data){`enter code here`
                 $('#dialog-form').html(data);
                 $('#dialog-form').dialog('open');}
    });
  }); 
  </code></pre>
  
  <p>Generate Form:</p>
  
  <pre><code>if ($func == "createNoteDialog" ){
    echo '&lt;form class="cmxform"&gt;&lt;fieldset&gt;';
  
    echo '&lt;li&gt;&lt;label for="Category"&gt;Category&lt;/label&gt;&lt;select id="inputCategory" class="text ui-widget-content ui-corner-all"&gt;';
    $r_categories = mysqli_query($global_dbh,'select category from pledges.patchCategories order by 1 asc');    
    $first_row = mysqli_fetch_row($r_categories);
    echo '&lt;option value="' . $first_row[0] . '" selected&gt;' .$first_row[0] . '&lt;/option&gt;';
    while(($row = mysqli_fetch_array($r_categories)) != false) echo '&lt;option value="' . $row[0] . '"&gt;' .$row[0] . '&lt;/option&gt;';
    echo '&lt;/select&gt;';
  
    echo '&lt;label for="Version"&gt;Version &lt;/label&gt;&lt;select id="inputVersion" class="text ui-widget-content ui-corner-all"&gt;';
    $r_versions = mysqli_query($global_dbh,'select version from pledges.patchVersions order by 1 desc');   
    $first_row = mysqli_fetch_row($r_versions);
    echo '&lt;option value="' . $first_row[0] . '" selected&gt;' .$first_row[0] . '&lt;/option&gt;';
    while(($row = mysqli_fetch_array($r_versions)) != false) echo '&lt;option value="' . $row[0] . '"&gt;' .$row[0] . '&lt;/option&gt;';
    echo '&lt;/select&gt;';
  
    echo '&lt;li&gt;&lt;label for="DevNote"&gt;Dev Note &lt;/label&gt;&lt;textarea id="inputDevNote" name="DevNote" cols=60 rows=7&gt;&lt;/textarea&gt;&lt;/li&gt;';
    echo '&lt;li&gt;&lt;label for="BuildNote"&gt;Build Note &lt;/label&gt;&lt;textarea id="inputBuildNote" name="BuildNote" cols=60 rows=7&gt;&lt;/textarea&gt;&lt;/li&gt;';
    echo '&lt;li&gt;&lt;label for="Comment"&gt;Comment &lt;/label&gt;&lt;textarea id="inputComment" name="Comment" cols=60 rows=6&gt;&lt;/textarea&gt;&lt;/li&gt;';
  
    echo '&lt;/fieldset&gt;&lt;/form&gt;';
  }
  </code></pre>
  
  <p>Saving:</p>
  
  <pre><code>$( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 700,
        width: 800,
        modal: true,
        buttons: {
          "Create Note": function() {
            $.post(    "functions.php"
                   , { "function": "saveNote" , "version": $("#inputVersion").val(), "category": $('#inputCategory').val()  ,"devNote": $('#inputDevNote').val() ,"buildNote": $('#inputBuildNote').val() ,"comment": $('#inputComment').val()});
              patchNotesTable.fnDraw();   
              $( this ).dialog( "close" );
          },
          "Cancel": function() {
            $( this ).dialog( "close" );
          }
        },
        close: function() {
          $(this).dialog('close');
        }
      });
  </code></pre>
  
  <p>For some reason the $('#inputCategory').val() and $('#inputVersion').val() are empty, while the text area's are fine.</p>
  
  <p>Also tried adding an onChange function to alert changes to the dropdown ... it wouldn't fire.</p>
  
  <p>The form seems to be generated correctly:</p>
  
  <pre><code>&lt;li&gt;&lt;label for="Category"&gt;Category&lt;/label&gt;&lt;select id="inputCategory" class="text ui-widget-content ui-corner-all"&gt;
  </code></pre>
  
  <p>Just can't figure out why it can't grab those values :)</p>