Functionality for my dropdown menu to act as a selector-CodePudding

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 >
  <h2 style="text-align: center">Stadt</h2>
  <button onclick="myFunction(this)" >Städte durchsuchen...</button>
  <div id="myDropdown" >
    <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.

CodePudding user response：

Live example whith some improvements:

The first six javascript lines verify if click is inside the element
Function selectItem changes button text to selected item value
Function showHide verify when show or hide the dropDown
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 >
  <h2 style="text-align: center">Stadt</h2>
  <button >Städte durchsuchen...</button>
  <div id="myDropdown" >
    <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>

CodePudding user response：

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;
}