ASP.NET MVC - Pass user input from View to Controller

I have created a UI like below: When user selects a country from dropdown list, then a view has returned dynamically. This view has the state name, a list of important cities and a text box to enter comments.

Now when user selects some values (more than one) from drop down lists ,enter some comments and then press Submit button these data should be passed back to controller for further processing.

Below is my model :

public class CountryModel
{
    public string Country { get; set; }
    public string State { get; set; }
    public List<string> Cities { get; set; }

    public static IEnumerable<CountryModel> GetLocationDetails()
    {
        return new List<CountryModel>()
        {
            new CountryModel { Country = "India", State = "WB", Cities = new List<string>(){ "Kolkata", "Kharagpur", "Darjeeling" } },
            new CountryModel { Country = "India", State = "AP", Cities = new List<string>(){ "Hyderabad", "Vizag", "Vijaywada" } },
            new CountryModel { Country = "India", State = "UP", Cities = new List<string>(){ "Kanpur", "Allahabad", "Agra" } },
            new CountryModel { Country = "India", State = "MH", Cities = new List<string>(){ "Mumbai", "Pune", "Nagpur", "Nasik", "Aurangabad" } },
            new CountryModel { Country = "India", State = "RJ", Cities = new List<string>(){ "Jaipur", "Kota", "Jaisalmer" } },
            new CountryModel { Country = "USA", State = "CA", Cities = new List<string>(){ "San Francisco", "Los Angeles", "Oakland" } },
            new CountryModel { Country = "USA", State = "WA", Cities = new List<string>(){ "Seattle", "Bellevue", "Yakima" } },
            new CountryModel { Country = "USA", State = "NY", Cities = new List<string>(){ "New York City", "Buffalo", "Albany" } },
        };
    }

    public List<SelectListItem> Countries { get; set; }
    public string Comments { get; set; }
}

Below is controller code:

public class CountryController : Controller
    {
        public ActionResult Select()
        {
            CountryModel viewmodel = new CountryModel();

            viewmodel.Countries = new List<SelectListItem>()
            {
                new SelectListItem { Text = "India", Value = "India", Selected = true },
                new SelectListItem { Text = "USA", Value = "USA" }
            };

           return View(viewmodel);
        }

        public JsonResult GetCountryDetails(string id)
        {
            var query = from c in CountryModel.GetLocationDetails()
                        where c.Country == id
                        select c;

            return Json(new { query }, JsonRequestBehavior.AllowGet);
        }
}

And the View is as below:

model MvcApplication2.Models.CountryModel
@{
    ViewBag.Title = "Select";
}
<h2>Select</h2>

@using (Html.BeginForm())
{
    @Html.Label("Select a Country:  ")
    @Html.DropDownListFor(m => m.Countries, Model.Countries)

    <div id="dynamictable"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#Countries').change(function () {
            var url = '/Country/GetCountryDetails/' + $('#Countries').val();

            $.getJSON(url, function (result) {
                if (result.query.length > 0) {
                    if ($('#tblResult').length) {
                        $('#tblResult').remove();
                    }

                    $('#dynamictable').append('<table border="1" id="tblResult"></table>');
                    var table = $('#dynamictable').children();
                    table.append('<th>State</th> <th>City</th> <th>Comments</th>');

                    var random = 1;

                    $.each(result.query, function (i, location) {
                        var ddlId = "citiesInState";
                        var finalDdlId = ddlId.concat(random.toString());

                        var markup = '<tr class="locationInfo"><td class="stateCode">' + location.State + '</td><td class="citiesList"><select id="' + finalDdlId + '"></select></td><td class="userCommentsOnLocation">@Html.TextBoxFor(m=>m.Comments)</td></tr>';
                        table.append(markup);

                        var option = '';
                        for (var i = 0; i < location.Cities.length; i++) {
                            $('#' + finalDdlId).append('<option value="' + location.Cities[i] + '">' + location.Cities[i] + '</option>');
                        }

                        random++;
                    });
                }
            });
        });
    });

</script>
<br />
<input type="submit" value="Submit" id="SubmitId" />
}

The issue here is these only the comments are being passed to controller. But no selected value from dropdown list is not being passed to controller. below is the POST Action method:

[HttpPost]
        public ActionResult Select(CountryModel cm)
        {
            if (cm == null)
            {
                throw new ArgumentNullException("cm");
            }

            return View("Display", cm);
        }

How can get all selected values in controller ? Any help is appreciated.