在下拉 javascript 中显示选定的选项答案

【问题标题】：show selected option in dropdown javascript在下拉 javascript 中显示选定的选项
【发布时间】：2019-06-21 04:14:12
【问题描述】：

我已经实现了导航栏以及如何首先使用 javascript 显示选定的选项

function getoptions(){
  var x =document.getElementById("languagelist");  
  var y = document.getElementById("language");  
  y.innerHTML= // set the selected language
}

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

【问题讨论】：

你是否使用过 bootstrap 的下拉菜单？
@Jinesh，感谢 fr 的回复，是的，当我选择法语时，按钮名称应该是 French，只需要在 Javascript 中执行
我认为你需要在jquery中实现，因为dropdown在jquery中创建了自己的函数
@Senthil 请看我的回答，这是纯粹的javascript

标签： javascript html css arrays object

【解决方案1】：

这个纯 javascript 解决方案适合您。运行和测试

<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<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(); return false">
        <a class="dropdown-item" href="/en">English</a>
        <a class="dropdown-item" href="/fr">French</a>
      </div>
    </div>
  </nav>
</body>

<script>

  function clickButton() {
    document.getElementById("languagelist").click();
  }

  function clickItem() {
    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 thehref = element.getElementsByTagName('a')[index].href; get the href here once you hosted, for testing I will use the name
          var buttonelement = document.getElementById("language");
          buttonelement.innerText = thetext;
          window.open("/"+thetext);
        }
      })(i);
    }
  }

</script>

</html>

希望这对某人有所帮助。干杯！

【讨论】：

非常感谢，它可以工作，但如果有 href 链接，<a class="dropdown-item" href="/en">English</a><a class="dropdown-item" href="/fr">French</a> 如果选择法语更新下拉列表并且它不会更改 url，
您是要导航还是只是通过附加en 或fr 来更改网址
感谢您的回复，导航它并且下拉菜单不应该改变，点击french应该在url中显示/fr并且下拉菜单应该是法语
当您在同一页面中时无法导航，而 javascript 中的下拉文本更改。页面将在您返回后重新加载。唯一的方法是在新标签页中打开它。请参阅我的更新答案。使用您的浏览器进行测试。在新标签页中打开在代码 sn-ps 中不起作用
感谢您的回复，当我点击下拉菜单时，我是否应该进行 ajax 调用以不重新加载页面但内容更改和下拉文本更改发生，

【解决方案2】：

您可以使用此代码

 <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#" data-value="action">Action</a></li>
        <li><a href="#" data-value="another action">Another action</a></li>
        <li><a href="#" data-value="something else here">Something else here</a></li>
        <li><a href="#" data-value="separated link">Separated link</a></li>
      </ul>
    </div>
    <script type="text/javascript">
    $(".dropdown-menu li a").click(function(){
    alert($(this).data('value'));

    });

【讨论】：

【解决方案3】：

添加数据属性并标识元素，

<nav>
    <div class="dropdown">
        <button id="language" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
            English
        </button>
        <div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2"  >
            <a class="dropdown-item" data-value="/en"  href="/en">English</a>
            <a class="dropdown-item" data-value="/fr"  href="/fr">French</a>
        </div>
    </div>
</nav>

这样的脚本，

删除元素并添加为第一项

 $(".dropdown-item").click(function () {
           var value = $(this).data('value');
           var innerHtmlValue = $(this).html();
           $('.dropdown-item').filter('[data-value="' + value + '"]').remove();
           $('#languagelist a:eq(0)').before("<a class='dropdown-item' data-value='" + value + "' href='/en'>" + innerHtmlValue + "</a>");
       });

【讨论】：