Selected value from drop-down list doesn't post from jquery dialog

I have a jQuery dialog. All of the fields are posting correctly except for the drop-downs, the value is getting passed as null rather than the selected value.

    <div id="popupCreateCompany" title="Create a new company"> 
    <form>
    <fieldset>
    <p>  
        <label for="company_name">Company Name:</label>
        <%= Html.TextBox("company_name") %>    
    </p>
    <p>
        <label for="company_desc">Company Description:</label>
        <%= Html.TextBox("company_desc") %>
    </p>  
    <p>
        <label for="address">Address:</label>
        <%= Html.TextBox("address") %>
    </p>
    <p>
        <label for="city">City:</label>
        <%= Html.TextBox("city") %>
    </p>
    <p>
        <label for="state">State:</label>
        <%= Html.TextBox("state") %>
    </p>
    <p>
        <label for="zip">Zip:</label>
        <%= Html.TextBox("zip") %>
    </p>
    <p>
        <label for="website">Website:</label>
        <%= Html.TextBox("website", "http:/") %>
    </p>
    <p>
        <label for="sales_contact">Sales Contact:</label>
        <%= Html.DropDownList("sales_contact", Model.SelectSalesContacts, "** Select Sales Contact **") %>
    </p>
    <p>
        <label for="primary_company">Primary Company:</label>
        <%= Html.DropDownList("primary_company", Model.SelectPrimaryCompanies, "** Select Primary Company **") %>

    </p>
    </fieldset>
    </form>

jQuery:

 $('#popupCreateCompany').dialog(
                {
                    autoOpen: false,
                    modal: true,
                    buttons:
                    {
                        'Add': function() {
                            var dialog = $(this);
                            var form = dialog.find('input:text');
                            $.post('/company/create', $(form).serialize(), function() {
                                dialog.dialog('close');
  开发者_StackOverflow                          })
                        },
                        'Cancel': function() {
                            $(this).dialog('close');
                        }
                    }
                });

        $("#create-company").click(function() {
            $('#popupCreateCompany').dialog('open');
        });

My SelectList definitions:

    public class SubcontractFormViewModel
{
    public subcontract Subcontract { get; private set; }
    public SelectList SelectPrimaryCompanies { get; set; }
    public MultiSelectList SelectService_Lines { get; private set; }
    public SelectList SelectSalesContacts { get; private set; }

    public SubcontractFormViewModel(subcontract subcontract)
    {
        SubcontractRepository subcontractRepository = new SubcontractRepository();

        Subcontract = subcontract;
        SelectPrimaryCompanies = new SelectList(subcontractRepository.GetPrimaryCompanies(), "company_id", "company_name");
        SelectService_Lines = new MultiSelectList(subcontractRepository.GetService_Lines(), "service_line_id", "service_line_name", subcontractRepository.GetSubcontractService_Lines(Subcontract.subcontract_id));
        SelectSalesContacts = new SelectList(subcontractRepository.GetContacts(), "contact_id", "contact_name");
    }
}

Your problem is this line:

var form = dialog.find('input:text');

You're only serializing <input> elements, not other form elements.

You could add the select elements by changing this to

var form = dialog.find('input:text, select');

or

var form = dialog.find('input:text').add('select');

You need to ensure the dialog is still within the form for the values to post, by default it isn't, like this:

$('#popupCreateCompany').dialog({
    autoOpen: false,
    modal: true,
    buttons:
    {
        'Add': function() {
            var dialog = $(this);
            var form = dialog.find('input:text');
            $.post('/company/create', $(form).serialize(), function() {
                dialog.dialog('close');
            })
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
}).parent().appendTo("#myFormID");

By default, jQuery UI (and some other modals too) append to created modal to the end of the <body>, so the actual <select> element is outside your form, meaning it isn't included in the POST values. If you do the .parent().appendTo() like above, it'll move the dialog wrapped back inside the form and it should be posted correctly.