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.

Does a click call a new site when the user clicks on menu item? — Reporter, Dec 08 '21 at 13:34
No and it shouldnt. It does nothing right now. The values of the menu items are just placeholders atm. — ItsRay, Dec 08 '21 at 13:37

ℛɑƒæĿᴿᴹᴿ · Accepted Answer · 2021-12-13T15:16:51.193

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>

Highly appreciated. Won't have time today anymore to test this out but thanks alot! — ItsRay, Dec 08 '21 at 16:16
As soon as you can test let me know if it worked. If that solves your problem don't forget to mark it as the correct answer. Thanks! — ℛɑƒæĿᴿᴹᴿ, Dec 08 '21 at 17:22

Reporter · Answer 2 · 2021-12-08T15:16:54.307

First of all, a small mistake exists in function filterFunction, so I corrected it:

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) {
            //Here was a tiny mistake of yours.
            a[i].style.display = "block";
        } else {
            a[i].style.display = "none";
        }
  }
}

So back to track. You need to assign the eventlistener "onClick" to your menu items. The following javascript function will do it:

function main() {
    let clickButton = document.querySelector("button.dropbtn");
    let menuItems = document.querySelectorAll(".dropdown-content a");
    for (i = 0; i < menuItems.length; i++) 
    {
           menuItems[i].addEventListener("click", function() {
             // I do not understand what you meant with "button value"
             clickButton.innerText = this.text;
           });       
    }
}

When your page is fully loaded, execute the assign process:

window.onload = main();

To your second question:

First: Declare a varible with global scope that will contain the starting value.

var startValueOfButton;

Second: In function main() add after the first line this one:

startValue = clickButton.innerText;

Third: In function filterFunction() put following lines above the for loop:

if (filter = "") {
    clickButton.innerText = startValue;
}

Functionality for my dropdown menu to act as a selector

2 Answers2

Live example (only javascript) whith some improvements:

Reference: