title: Dropdown list value is null when i submit button?
body: <p>Form having dropdown <code>country list</code> when i click on submit button country ID value is passed to the controller..when i click on <code>F10</code> keybord button country bind method is called .so again return to starting point so that again country value is <code>Null</code> Below i attached the screen shot:</p>
  
  <pre><code>&lt;div class="page-content"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;header class="section-header"&gt;
              &lt;div class="tbl"&gt;
                  &lt;div class="tbl-row"&gt;
                      &lt;div class="tbl-cell"&gt;
                          &lt;h2&gt;Company Registration Form&lt;/h2&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/header&gt;
          @using (Html.BeginForm())
          {
              @Html.AntiForgeryToken()
              @Html.ValidationSummary(true)
              &lt;section class="tabs-section"&gt;
                  &lt;div class="tabs-section-nav tabs-section-nav-icons"&gt;
                      &lt;div class="tbl"&gt;
                          &lt;ul class="nav" role="tablist"&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a class="nav-link active" href="#tabs-1-tab-1" role="tab" data-toggle="tab"&gt;
                                      &lt;span class="nav-link-in"&gt;
                                          &lt;i class="font-icon font-icon-cogwheel"&gt;&lt;/i&gt;
                                          Company Registration Form
                                      &lt;/span&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a class="nav-link" href="#tabs-1-tab-2" role="tab" data-toggle="tab"&gt;
                                      &lt;span class="nav-link-in"&gt;
                                          &lt;span class="glyphicon glyphicon-music"&gt;&lt;/span&gt;
                                          Company Social Network
                                      &lt;/span&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a class="nav-link" href="#tabs-1-tab-3" role="tab" data-toggle="tab"&gt;
                                      &lt;span class="nav-link-in"&gt;
                                          &lt;i class="fa fa-product-hunt"&gt;&lt;/i&gt;
                                          Company Reference
                                      &lt;/span&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;!--.tabs-section-nav--&gt;
                  &lt;div class="tab-content"&gt;
                      &lt;div role="tabpanel" class="tab-pane fade in active show" id="tabs-1-tab-1"&gt;
                          &lt;br /&gt;
                          &lt;br /&gt;
                          &lt;section&gt;
                              &lt;div&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; Model.company.CompanyName, new { @class = "form-label semibold control-label" })
                                              @Html.TextBoxFor(model =&gt; model.company.CompanyName, new { @class = "form-control", @id = "txtCompanyName", placeholder = "Enter the Company Name" })
                                              @Html.ValidationMessageFor(model =&gt; model.company.CompanyName)
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.ShortName, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.ShortName, new { @class = "form-control", @id = "txtShortName", placeholder = "Enter the Short Name" })
                                              @Html.ValidationMessageFor(model =&gt; model.company.ShortName)
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.Division, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.Division, new { @class = "form-control", @id = "txtDivision", placeholder = "Enter the Division" })
                                              @Html.ValidationMessageFor(model =&gt; model.company.Division)
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;&lt;!--.row--&gt;
                                  &lt;br /&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.Email, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.Email, new { @class = "form-control", @id = "txtEmail", placeholder = "Enter your Email" })
                                              @Html.ValidationMessageFor(model =&gt; model.company.Email)
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.Address1, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.Address1, new { @class = "form-control", @id = "txtAddress1", placeholder = "Enter your Address Line 1" })
                                              @Html.ValidationMessageFor(model =&gt; model.company.Address1)
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.Address2, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.Address2, new { @class = "form-control", @id = "txtAddress2", placeholder = "Enter your Address Line 2" })
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;&lt;!--.row--&gt;
                                  &lt;br /&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.Country, new { @class = "form-label semibold" })
                                              @Html.DropDownList("Country", null, "--- Select Country ---", new { @class = "select2-arrow" })
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.State, new { @class = "form-label semibold" })
                                              &lt;select id="state" class="select2-arrow"&gt;&lt;/select&gt;
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.City, new { @class = "form-label semibold" })
                                              &lt;select id="city" class="select2-arrow"&gt;&lt;/select&gt;&lt;br /&gt;
  
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;&lt;!--.row--&gt;
                                  &lt;br /&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.Pincode, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.Pincode, new { @class = "form-control", @id = "txtPincode", placeholder = "Enter your Pincode" })
                                              @Html.ValidationMessageFor(model =&gt; model.company.Pincode)
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.CountryCode, new { @class = "form-label semibold" })
                                              @*@Html.DropDownList("CountryCode", null, "---Select CountryCode---", new { @class = "select2-arrow" })*@
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.MobileNo, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.MobileNo, new { @class = "form-control", @id = "txtMobileNo", placeholder = "Enter your Mobile Number" })
                                              @Html.ValidationMessageFor(model =&gt; model.company.MobileNo)
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;&lt;!--.row--&gt;
                                  &lt;br /&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.PhoneNo, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.PhoneNo, new { @class = "form-control", @id = "txtPhoneNo", placeholder = "Enter your PhoneNo" })
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.PanNo, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.PanNo, new { @class = "form-control", @id = "txtPanNo", placeholder = "Enter Company PanNo" })
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.TinNo, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.TinNo, new { @class = "form-control", @id = "txtTinNo", placeholder = "Enter Company TinNo" })
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;&lt;!--.row--&gt;
                                  &lt;br /&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.GSTno, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.GSTno, new { @class = "form-control", @id = "txtGSTno", placeholder = "Enter Company GSTno" })
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.company.IECCode, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.company.IECCode, new { @class = "form-control", @id = "txtIECCode", placeholder = "Enter Company IECCode" })
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;&lt;!--.row--&gt;
                                  &lt;br /&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              &lt;label class="form-label semibold"&gt;Upload Company Logo&lt;/label&gt;&amp;nbsp;&amp;nbsp;
                                              &lt;input type="file" name="file" id="txtUploadImage" style="cursor:pointer;" /&gt;
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              &lt;label class="form-label semibold"&gt;Perview Image&lt;/label&gt;&amp;nbsp;&amp;nbsp;
                                              &lt;img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" /&gt;
                                              &lt;a id="remove" onclick="javascript:ClearFileUploadControl();" style="display: none; cursor: pointer;"&gt;Remove&lt;/a&gt;
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;br /&gt;
                                  &lt;input type="submit" name="Submit" id="SaveCompany" value="Save" class="btn btn-rounded btn-inline btn-success" /&gt;
                              &lt;/div&gt;
                          &lt;/section&gt;
  
                      &lt;/div&gt;&lt;!--.tab-pane--&gt;
                      &lt;div role="tabpanel" class="tab-pane fade" id="tabs-1-tab-2"&gt;
                          &lt;br /&gt;
                          &lt;section&gt;
                              &lt;div&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.CompanySocial.FaceBookID, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.CompanySocial.FaceBookID, new { @class = "form-control", @id = "txtFaceBookID", placeholder = "Enter the Facebook Link" })
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.CompanySocial.TwitterID, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.CompanySocial.TwitterID, new { @class = "form-control", @id = "txtTwitterID", placeholder = "Enter the Twitter Link" })
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-lg-4"&gt;
                                          &lt;fieldset class="form-group"&gt;
                                              @Html.LabelFor(model =&gt; model.CompanySocial.linkedinID, new { @class = "form-label semibold" })
                                              @Html.TextBoxFor(model =&gt; model.CompanySocial.linkedinID, new { @class = "form-control", @id = "txtlinkedinID", placeholder = "Enter the Linkedin Link" })
                                          &lt;/fieldset&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;&lt;!--.row--&gt;
                              &lt;/div&gt;
                          &lt;/section&gt;
                          &lt;input type="submit" name="Submit" value="Previous" class="btn btn-rounded btn-inline btn-primary prev-step " /&gt;
                          &lt;input type="submit" name="Submit" id="saveSocial" value="Next" class="btn btn-rounded btn-inline btn-success" /&gt;
                      &lt;/div&gt;&lt;!--.tab-pane--&gt;
                      &lt;div role="tabpanel" class="tab-pane fade" id="tabs-1-tab-3"&gt;
                          Tab 3
                          &lt;br /&gt;
                          &lt;br /&gt;
                          &lt;input type="submit" name="Submit" value="Previous" class="btn btn-rounded btn-inline btn-primary prev-step" /&gt;
                          &lt;input type="submit" name="Submit" value="Finish" class="btn btn-rounded btn-inline btn-success" /&gt;
                      &lt;/div&gt;&lt;!--.tab-pane--&gt;
                  &lt;/div&gt;&lt;!--.tab-content--&gt;
              &lt;/section&gt;&lt;!--.tabs-section--&gt;
          }
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Scripts:</p>
  
  <pre><code>&lt;script&gt;
          function GetInfo() {
              var Company = {
                  CompanyName: $("#txtCompanyName").val(), ShortName: $("#txtShortName").val(), Division: $("#txtDivision").val(), Email: $("#txtEmail").val(), Address1: $("#txtAddress1").val(), Address2: $("#txtAddress2").val(), Country: $("#Country").val(), State: $("#state").val(), City: $("#city").val(),
                  Pincode: $("#txtPincode").val(), MobileNo: $("#txtMobileNo").val(), PhoneNo: $("#txtPhoneNo").val(), PanNo: $("#txtPanNo").val(), TinNo: $("#txtTinNo").val(), GSTno: $("#txtGSTno").val(), IECCode: $("#txtIECCode").val()
              };
  
              var mainModel = {};
              mainModel.Company = Company;
  
              $.ajax({
                  type: "POST",
                  url: "/Company/AddCompany",
                  data: JSON.stringify(mainModel),
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: OnSuccess,
                  failure: function (response) {
                      alert(response.d);
                  }
              });
          }
  
          function OnSuccess(response) {
              alert(response.d);
          }
  
          $(document).ready(function () {
              $("#saveSocial").click(function (e) {
                  e.preventDefault();
                  GetInfo1();
              });
  
              $("#SaveCompany").click(function (e) {
                  //e.preventDefault();
                  GetInfo();
              });
          });
  
  
          function GetInfo1() {
              var Social = { FaceBookID: $("#txtFaceBookID").val(), TwitterID: $("#txtTwitterID").val(), linkedinID: $("#txtlinkedinID").val() };
  
              var mainModel = {};
              mainModel.CompanySocial = Social;
  
              $.ajax({
                  type: "POST",
                  url: "/Company/AddSocial",
                  data: JSON.stringify(mainModel),
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: OnSuccess,
                  failure: function (response) {
                      alert(response.d);
                  }
              });
          }
      &lt;/script&gt;
  
      &lt;script&gt;
          $(document).ready(function () {
              $("#Country").change(function () {
                  var id = $(this).val();
                  $("#state").empty();
                  $.get("State_Bind", { CountryID: id }, function (data) {
                      var v = "&lt;option&gt;--- Select State ---&lt;/option&gt;";
                      $.each(data, function (i, v1) {
                          v += "&lt;option value=" + v1.Value + "&gt;" + v1.Text + "&lt;/option&gt;";
                      });
                      $("#state").html(v);
                  });
              });
  
              $("#state").change(function () {
                  var id = $(this).val();
                  $("#city").empty();
                  $.get("City_Bind", { StateID: id }, function (data) {
                      var v = "&lt;option&gt;--- Select City---&lt;/option&gt;";
                      $.each(data, function (i, v1) {
                          v += "&lt;option value=" + v1.Value + "&gt;" + v1.Text + "&lt;/option&gt;";
                      });
                      $("#city").html(v);
                  });
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Class value:</p>
  
  <pre><code>public int Country { get; set; }
          public int State { get; set; }
          public int City { get; set; }
  </code></pre>
  
  <p>Screen shot:
  <a href="https://i.stack.imgur.com/duAkt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/duAkt.png" alt="First photo"></a></p>
  
  <p><a href="https://i.stack.imgur.com/T8U4f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T8U4f.png" alt="Empty Country"></a></p>
  
  <p>ActionResult:</p>
  
  <pre><code>[HttpPost]
          public ActionResult AddCompany(MainModel mainModel)
          {
  
              try
              {
  
                  Country_Bind();
  
                  if (ModelState.IsValid)
                  {
                      dp obj = new dp();
                      if (obj.AddNewCompany(mainModel))
                      {
                          ViewBag.Message = "Company added successfully";
                      }
                  }
  
                  return View();
              }
  
              catch
              {
                  return View();
              }
  
          }
  </code></pre>
  
  <p>Country code:</p>
  
  <pre><code>public void Country_Bind()
          {
              DataSet ds = dblayer.Get_Country();
              List&lt;SelectListItem&gt; coutrylist = new List&lt;SelectListItem&gt;();
              foreach (DataRow dr in ds.Tables[0].Rows)
              {
                  coutrylist.Add(new SelectListItem { Text = dr["CountryName"].ToString(), Value = dr["CountryID"].ToString() });
              }
              ViewBag.Country = coutrylist;
          }
  </code></pre>