刷新下拉菜单更改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

热门问答

如何将本地的.json格式的文件部署到服务器上, 通过url请求?

使用 CDS-Mask 做数据合作,怎么确保双方都不能反推对方的 ID?

用户2134289

腾讯科技 · 高级工程师 (已认证)

推荐
您好,两种方案可以解决您的需求 1)如果您这边ID不需要在业务上使用,将ID进行加星脱敏即可,加星后的所有数据字符将变为*,无法还原; 2)如果您这边ID在业务上需要使用,也就是ID在处理后必须保持唯一性,那么需要采用腾讯数港算法解决该问题,数港算法目前灰度中,如需要申请,烦请通...... 展开详请

MySQL还要另外购买吗?

蒋小爱

腾讯云 · 技术支持 (已认证)

推荐已采纳
您好,您可在服务器中自建MySQL ,同时腾讯云提供数据库 MySQL(TencentDB for MySQL)让用户可以轻松在云端部署、使用 MySQL 数据库。MySQL 是世界上最流行的开源关系数据库,通过云数据库 MySQL,您在几分钟内即可部署可扩展的 MySQL ...... 展开详请

实时语音识别支持c#平台吗?

支持的。虽然SDK没有C#的,但是可以通过API进行请求

腾讯一句话语音识别为什么识别不了微信公众号临时下载的语音?

腾讯云智能语音服务员

腾讯 · 社区FAQ (已认证)

推荐

如果只是单纯的转换后缀,那么仍然还是没办法识别的,需要用特定的工具转化为正常的wav类型音频。识别结果为空有可能是采样率不匹配,目前一句话识别只支持8k和16k的采样率的音频识别。

cos.sliceUploadFile支持断点续传吗?

如果用的是 cos-js-sdk,那么 cos.restartTask 是会断点续传的,用法没有问题。 PS: sdk 使用可以参考 demo.js https://github.com/tencentyun/cos-js-sdk-v5/blob/master/demo/demo...... 展开详请

扫码关注云+社区

领取腾讯云代金券