无法将变量从一个元素传递到HTML5中的下一个元素

Question

我完全难以接受，不能这样做，但经过严格的搜索，我无法在任何地方找到它。

当用户从下面的下拉菜单中选择时，我想用字母本身更新文章元素。这是我的代码：

   <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <div class="dropdown">
        <a href="#" class="dropbtn"  id="active">Letters</a>
         <div class="dropdown-content" >
           <a href="#">Letter 1</a>
           <a href="#">Letter 2</a>
         </div>
      </div>
      <li><a href="aboutus.html">About Us</a></li>
      <li><a href="contactus.html">Contact Us</a></li>
    </ul>
    </nav>  

    <div id="boxes">  
        <section id="main" role="main">
            <article> 

            </article>        
        </section>  
    </div>

以下是我用来更新的功能，请知道我已对此进行了测试，效果很好。

    function loadDoc(name) {
  var xhttp = new XMLHttpRequest();
  if (window.XMLHttpRequest) {
    // code for modern browsers
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("menu_opt").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", name, true);
  xhttp.send();
} 

非常感谢任何帮助。