刷新更改javascript的下拉菜单答案

【问题标题】：Dropdown menu on refresh changes javascript刷新更改javascript的下拉菜单
【发布时间】：2019-06-23 14:51:22
【问题描述】：

我已经实现了一个导航栏 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>

【问题讨论】：

你能分步解释应该发生什么以及现在发生什么吗？每种语言都有不同的 .html 文件吗？
@jonahe 感谢您的回复，我有每种语言的 .json 文件，所以当我点击 french 时，后端 (href="\fr") 发送文件以更改适当语言的内容，翻译部分工作正常，但页面刷新和下拉显示第一个选项而不是选中
@jonahe 当我选择下拉列表时应该更改 url 并显示所选的下拉列表。当我选择 french 时，将转到 /fr nodejs 路由并呈现带有 url 更改的页面并选择下拉显示法语，在我的代码中，url 更改和翻译工作但始终显示 english 选项
抱歉，如果不使用实际代码，我很难找到解决方案。我发现了一个与我修改的代码示例类似的问题，以表明您可以将所选值保存在 localStorage 中（即使在页面刷新后也会记住您的值）。但我无法真正修改它以适合您的示例。也许你可以。祝你好运。 jsfiddle.net/jonahe/rtx58cLg/6
也许这个链接也可以帮助你，结合将所选语言保存在本地存储中：bootply.com/118698

标签： javascript jquery html css ajax

【解决方案1】：

我对 .ejs 不是很熟悉，但是（查看您在评论中发布的其他代码）似乎您应该能够“传递”来自 req.params.lang 的所选语言，然后使其可用在您的 .ejs 模板中。

类似：

router.get('/:lang', function (req, res) {
    const languageMap = {
      "en": "English",
      "fr": "French"
    };

    const selectedLang = req.params.lang;
    const name = languageMap[selectedLang];
    // pass the value down to index.ejs which in turn renders header.ejs 
    res.render('index.ejs', { selectedLanguageName: name });
});

然后在您的header.ejs 中。您应该可以使用selectedLanguageName，使用<%= yourVariableNameHere %> 语法

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

我在本教程中找到了一些有用的信息：https://scotch.io/tutorials/use-ejs-to-template-your-node-application

有可能因为 index.ejs 被包含为“部分”，因此您在包含它时必须明确地将变量传递给它。

<%- include('header.ejs', {selectedLanguageName: selectedLanguageName}); %>

或类似的东西。

Ejs 似乎有很好的基础文档，值得一试https://ejs.co/#docs

【讨论】：

非常感谢您的帮助，如果我在导航栏中有带有链接的导航项目（关于，联系页面），是否可以更改 url？比如/fr/about, /fr/contact
我在您的另一篇帖子stackoverflow.com/a/56731637/4763083中添加了一个可能的答案@

【解决方案2】：

您正在更改页面，因此您正在运行的 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

【讨论】：