刷新下拉菜单更改javascript

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (13)

我已经实现了一个navbar uisng bootstrap 4,其中我有一个语言下拉列表,在选择时翻译页面,当选择下拉语言时,url将改变并且下拉列表没有显示正确的选择,

我应该做ajax调用不刷新/重新加载页面和更改内容。请帮忙

<body>
  <nav>
    <div class="dropdown">
      <button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
        English
      </button>
      <div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem();">
        <a class="dropdown-item" href="/en">English</a>
        <a class="dropdown-item" href="/fr">French</a>
      </div>
    </div>
  </nav>
</body>

<script>
 function handleLanguage() {
    document.getElementById("languagelist").click();
  }

  function handleLanguageItem() {
    var element = document.getElementById("languagelist");
    for (var i = 0; i < 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);
    }    
  }

</script>
提问于
用户回答回答于

您正在更改页面,因此您运行的javascript在单击后不会执行任何操作,您应该根据路径在页面加载时通过服务器更改按钮的文本。但是,这是一个使用javascript的解决方案(不是最佳的,因为它需要首先加载页面):

let languageMap = {
    "en": "English",
    "fr": "French"
};

document.querySelector('#language').innerText = languageMap[location.pathname.substr(1, 2)]; // Get the language short from the 2 first characters after the / in the URL

扫码关注云+社区

领取腾讯云代金券