title: JavaScript: What is the best way to retrieve the selected value from a dropdown menu?
body: <p>I simply want to retrieve the value of the selected option from the dropdown menu. I put together something haphazard below that was almost functioning. </p>
  
  <p>What is an appropriate solution for this task?</p>
  
  <p>You will see that there are four option values to select form the dropdown menu: Audi, Citroen, BMW, Tesla. I want to know which value is selected from the dropdown in order to display content on the page corresponding to the selection. </p>
  
  <p>Code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// WHAT IS THE BEST WAY TO RETRIEVE THE VALUE FROM THE DROPDOWN MENU?
  function pageSelected() {
  if (document.getElementById("myDropdown").value == 1) {
  document.getElementById("optionvalue").innerHTML = "Audi";
  } else if (document.getElementById("myDropdown").value == 2) {
  document.getElementById("optionvalue").innerHTML = "Citroen";
  } else if (document.getElementById("myDropdown").value == 3) {
  document.getElementById("optionvalue").innerHTML = "BMW";
  } else if (document.getElementById("myDropdown").value == 4) {
  document.getElementById("optionvalue").innerHTML = "Ford";
  }
  }
  
  /* When the user clicks on the button, 
  toggle between hiding and showing the dropdown content */
  function ddm() {
      document.getElementById("myDropdown").classList.toggle("show");
  }
  
  // Close the dropdown if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
  
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i &lt; dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dropbtn {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }
  
  .dropbtn:hover, .dropbtn:focus {
      background-color: #2980B9;
  }
  
  .dropdown {
      position: relative;
      display: inline-block;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }
  
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }
  
  .dropdown a:hover {background-color: #ddd;}
  
  .show {display: block;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="infobar"&gt;
  &lt;div id="info"&gt;
  &lt;/div&gt;
  
  &lt;!--dropdown option value goes here--&gt;
  &lt;div id="optionvalue"&gt;option value&lt;/div&gt;
  
  &lt;div class="dropdown"&gt;
  &lt;button onclick="ddm()" class="dropbtn"&gt;&amp;#9660;&lt;/button&gt;
    &lt;div id="myDropdown" class="dropdown-content"&gt;
      &lt;a&gt;&lt;option value="1" onclick="pageSelected()" &gt;Audi&lt;/option&gt;&lt;/a&gt;
      &lt;a&gt;&lt;option value="2" onclick="pageSelected()"&gt;Citroen&lt;/option&gt;&lt;/a&gt;
      &lt;a&gt;&lt;option value="3" onclick="pageSelected()"&gt;BMW&lt;/option&gt;&lt;/a&gt;
      &lt;a&gt;&lt;option value="4" onclick="pageSelected()"&gt;Ford&lt;/option&gt;&lt;/a&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>