Question

我已经实现了导航栏，以及如何首先使用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>

Answer 1

您可以使用此代码

 <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'));

    });

Answer 2

添加数据属性并标识元素

<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>");
       });

Answer 3

此纯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>

希望这对某人有帮助。欢呼！

在下拉JavaScript中显示所选选项

3 个答案: