Functionality for my dropdown menu to act as a selector

Question

I am very new to programming with html, css and javascript.

I have created a dropdown menu with a search function but am stuck now on getting the selected value of the dropdown into the dropdown button as the value of the button.

Is there an easy way to implement this?

function myFunction(a) {
  a.parentNode.getElementsByClassName('dropdown-content')[0].classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

.dropbtn {
  background-color: white;
  color: grey;
  padding: 8px;
  padding-right: 120px;
  font-size: 16px;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #FAFAFA;
}

#myInput {
  box-sizing: border-box;
  background-image: url("/img/searchicon.png");
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {
  outline: 3px solid #ddd;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 280px;
  max-width: 280px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

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

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

.show {
  display: block;
}

<div class="Stadtbox dropdown">
  <h2 style="text-align: center">Stadt</h2>
  <button onclick="myFunction(this)" class="dropbtn">Städte durchsuchen...</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Stadtname.." id="myInput" onkeyup="filterFunction()">
    <a>About</a>
    <a>Base</a>
    <a>Blog</a>
    <a>Contact</a>
    <a>Custom</a>
    <a>Support</a>
    <a>Tools</a>
  </div>
</div>

Plan is to create a page with multiple dropdown menus where you can chose from things out of a database to create new profiles.

I want users to be able to select from a predetermined list of options in each dropdown box and when they submit it, the value of the dropdown-buttons is read out and being made into a new profile.

Oh, and while im asking, I was also wondering how I would make the dropdown menus close on a click outside of the box. Or on selecting something from the dropdown menu.

Answer 1

Live example (only javascript) whith some improvements:

• The first six javascript lines verify if click is inside dropbtn element
• Function selectItem changes dropbtn text to selected item value
• Function showHide control when show or hide the dropdown-content
• Added min-width to dropbtn class for dynamic texts

Reference:

• How do I detect a click outside an element?

const dropBtn = document.getElementsByClassName('dropbtn')[0];

document.addEventListener('click', (event) => {
  const dropArea = event.composedPath().includes(dropBtn);
  showHide(dropArea);
});

function showHide(dropArea) {
  const dropDown = document.getElementsByClassName('dropdown-content')[0];
  if (dropArea) {
    dropDown.classList.toggle("show");
  } else if (dropDown.classList.contains('show')) {
    dropDown.classList.toggle("show");
  }
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

function selectItem(link) {
  dropBtn.innerText = link.innerText;
}

.dropbtn {
  min-width: 300px;
  background-color: white;
  color: grey;
  padding: 8px;
  padding-right: 120px;
  font-size: 16px;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #FAFAFA;
}

#myInput {
  box-sizing: border-box;
  background-image: url("/img/searchicon.png");
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {
  outline: 3px solid #ddd;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 280px;
  max-width: 280px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

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

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

.show {
  display: block;
}

<div class="Stadtbox dropdown">
  <h2 style="text-align: center">Stadt</h2>
  <button class="dropbtn">Städte durchsuchen...</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Stadtname.." id="myInput" onkeyup="filterFunction()">
    <a onclick="selectItem(this);">About</a>
    <a onclick="selectItem(this);">Base</a>
    <a onclick="selectItem(this);">Blog</a>
    <a onclick="selectItem(this);">Contact</a>
    <a onclick="selectItem(this);">Custom</a>
    <a onclick="selectItem(this);">Support</a>
    <a onclick="selectItem(this);">Tools</a>
  </div>
</div>