показать выбранный вариант в выпадающем Javascript - PullRequest
Новая
       2

показать выбранный вариант в выпадающем Javascript

0 голосов
/ 21 июня 2019

Я реализовал панель навигации и как сначала показать выбранные опции, используя 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>

Ответы [ 3 ]

0 голосов
/ 21 июня 2019

Добавить атрибут данных и определить элемент, 

<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>");
       });
0 голосов
/ 21 июня 2019

Это чистое решение 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>

надеюсь, это кому-нибудь поможет. ура!

0 голосов
/ 21 июня 2019

Вы можете использовать этот код 

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

    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...