title: Dropdown menu on refresh changes javascript
body: <p>I have implemented a navbar uisng bootstrap 4,in which I have a language dropdown, on selection translates the page, 
  When dropdown language is selected, the url will change and dropdown not showing the correct selection , </p>
  
  <p>should I do ajax call for not refresh/reload the page and change the content.
  Please help </p>
  
  <pre><code>&lt;body&gt;
    &lt;nav&gt;
      &lt;div class="dropdown"&gt;
        &lt;button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()"&gt;
          English
        &lt;/button&gt;
        &lt;div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem();"&gt;
          &lt;a class="dropdown-item" href="/en"&gt;English&lt;/a&gt;
          &lt;a class="dropdown-item" href="/fr"&gt;French&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
   function handleLanguage() {
      document.getElementById("languagelist").click();
    }
  
    function handleLanguageItem() {
      var element = document.getElementById("languagelist");
      for (var i = 0; i &lt; element.children.length; i++) {
        (function(index) {
          element.children[i].onclick = function() {
            var thetext = element.getElementsByTagName('a')[index].innerHTML;
            var buttonelement = document.getElementById("language")
            buttonelement.innerText = thetext;
          }
        })(i);
      }    
    }
  
  &lt;/script&gt;
  </code></pre>