在下拉JavaScript中顯示所選選項

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 個解決方案

解決方案1
0 2019-06-21 05:18:00

解決方案2
0 2019-06-21 06:52:48

解決方案3
0 已采納 2019-06-21 07:58:58

在下拉JavaScript中顯示所選選項

問題描述

3 個解決方案

解決方案1 0 2019-06-21 05:18:00

解決方案2 0 2019-06-21 06:52:48

解決方案3 0 已采納 2019-06-21 07:58:58

解決方案1
0 2019-06-21 05:18:00

解決方案2
0 2019-06-21 06:52:48

解決方案3
0 已采納 2019-06-21 07:58:58