Question 275716 in Html Question posted in
Some basic documentation can be found here.

Html – how to show selected item in dropdown

I have the code shown below [I am using JQuery and Bootstrap 4]:

$('.dropdown-menu li').on('click', function() {
  var getValue = $(this).text();
  $('.dropdown-select').text(getValue);
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="col-auto p-2 col-5">
  <div class="dropdown">
    <button id="dLabel" class="dropdown-select" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Select
        <span class="caret"></span>
     </button>
    <ul class="dropdown-menu" aria-labelledby="dLabel">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
      <li>Option 4</li>
      <li>Option 5</li>
      <li>Option 6</li>
    </ul>
  </div>
</div>

by clicking any dropdown option, not selected and don’t show on it.

Tags:

2

Answers


  1. 0

    If I understood correctly. You need something like this:

    1. Create index.html
    2. create styles.css
    3. create dropdown.js
    function myFunction() {
  var dropdownMenu = document.getElementById("myDropdown");
  if (dropdownMenu.style.display === "block") {
    dropdownMenu.style.display = "none";
  } else {
    dropdownMenu.style.display = "block";
  }
}
    .dropbtn {
  background-color: #000fb7;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.show {
  display: block;
}
    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
  <a href="#yourlink1">Option 1</a>
  <a href="#yourlink2">Option 2</a>
  <a href="#yourlink3">Option 3</a>
</div>

    Defer means — a script executed after the page has finished parsing

    Login or Signup to reply.
  2. 0

    Push away from the <li> you choose, because there can be more than one .dropdown on the page.
    And just add the active class to <li> in this list.

    $(document).on('click', '.dropdown-menu li', function() {
  const li = $(this);
  li.closest('.dropdown-menu').find('li').removeClass('active');
  li.addClass('active');
  li.closest('.dropdown').find('.dropdown-select').text( li.text() );
});
    .dropdown-menu .active {
  background: yellow;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="col-auto p-2 col-5">
  <div class="dropdown">
    <button id="dLabel" class="dropdown-select" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Select
        <span class="caret"></span>
     </button>
    <ul class="dropdown-menu" aria-labelledby="dLabel">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
      <li>Option 4</li>
      <li>Option 5</li>
      <li>Option 6</li>
    </ul>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search