title: Trying to select the value that was chosen in a drop down list using the ID of the drop down list
body: <p><a href="https://i.stack.imgur.com/Wi90e.png" rel="nofollow noreferrer">enter image description here</a>I am trying to retrieve the value that was selected by the end user in a drop down list. The variable country is always null, I am using the id of the drop down list to retrieve the value that was selected by the user.</p>
  
  <p>Here is the code in my view:</p>
  
  <pre><code>    &lt;script&gt;
          var country = document.getElementById("Countries");
          var value = country.options[country.selectedIndex].value;
          var text = country.options[country.selectedIndex].text;
    &lt;/script&gt;
  
  @Html.Label("Country", "Country")
  &lt;select name="Countries" id="Countries"&gt;
      @foreach (var country in ViewBag.countries)
      {
          &lt;option value="@(country.country)"&gt;@(country.country)&lt;/option&gt;
      }
  &lt;/select&gt;
  </code></pre>
  
  <p>}</p>