Question

I think I’m missing something simple, but I’m just not seeing it. I have an ASP.NET MVC app that is dynamically building a dropdown based on the value of another dropdown. The dropdown list is being populated correctly but when the form posts back the value of the combo isn’t posted back for some reason.

        $(document).ready(function () {
            PopulateList();
            $("#List").change(GetSelectedItem);
        });

        function PopulateList() {
            var timeSlot = $("#Timeslot").val();
            var options = [];
            var list = 0;
            $.getJSON("GetList/" + timeSlot, "", function (data, textStatus) {
            for (var i = 0; i < data.length; i++) {
                options.push('<option value="',
                data[i].ID, '">',
                data[i].Name, '</option>');
            }
            $("#List").html(options.join(''));
            if (data.length > 0)
                list = data[0].ID;

            GetSelectedItem(timeSlot, list);
        });

Further down in the view I have this:

<% Html.BeginForm(); %>
<select id="List" style="width:120px"></select>
(lots of HTML removed)
<% Html.EndForm(); %>

I’ve double-checked the markup generated by displaying $(“#List”).html() and it looks OK. I’ve also checked to make sure the dropdown is enclosed in the form and that there isn’t any other unterminated strings around this dropdown that might be interferring with it. I can check the value of the dynamically built dropdown and the value is set correctly. I’ve watched was is being posted back via Fiddler and Firebug and this field is missing (so it’s not MVC filtering it).

What am I missing?

Answer 1

To be included when the <form> is submitted, your element needs a name attribute, like this:

<select id="List" name="List" style="width:120px"></select>