JavaScript下拉菜单-根据同一下拉菜单中的所选选项显示不同的选项

smurf41 发表于常见问题

蓝精灵41

我正在尝试基于w3schools可搜索下拉列表构建一个下拉列表。我的下拉菜单有3个项目。当单击其中一个时，我要根据单击的位置来显示新选项（替换旧选项）。我将如何处理？另外，滑动动画-滑动的新选项-很棒。

任何想法如何开始这样的事情？

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").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";
    }
  }
}

/* The container <div> - needed to position the dropdown content */

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


/* Dropdown Content (Hidden by Default) */

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


/* Links inside the dropdown */

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


/* Change color of dropdown links on hover */

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


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<div class="dropdown">
  <input type="text" placeholder="Search.." id="myInput" onclick="myFunction()" class="dropbtn" onkeyup="filterFunction()">
  <div id="myDropdown" class="dropdown-content">
    <a href="#about">Expense:</a>
    <a href="#base">Income:</a>
    <a href="#blog">Transfer:</a>
  </div>
</div>

twoK

这可以通过多种方式完成。

还要记住，这种类型的问题在这里并不太受欢迎，它需要更多的关注，当您陷入代码的某些部分时，应该尝试一些然后寻求帮助。

这是如何执行此操作的基本示例，应该足以给您一张有关如何开始的图片，并根据您的需要进行完善：

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").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";
    }
  }
}

document.querySelectorAll('#myDropdown a').forEach(item => {
//get all links from menu
  item.addEventListener('click', function() {
  // add Event Listener to each
    document.querySelectorAll("." + this.id).forEach(menuOption => {
      menuOption.classList.add("slide-in")
      // on click get item id and use it to add class to elements with same class
    });
  });
});

/* Sub menu options */

.options {
  display: none;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

.slide-in {
  display: block !important;
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

@keyframes slide-in {
  100% {
    transform: translateY(0%);
  }
}


/* The container <div> - needed to position the dropdown content */

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


/* Dropdown Content (Hidden by Default) */

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


/* Links inside the dropdown */

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


/* Change color of dropdown links on hover */

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


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<div class="dropdown">
  <input type="text" placeholder="Search.." id="myInput" onclick="myFunction()" class="dropbtn" onkeyup="filterFunction()">
  <div id="myDropdown" class="dropdown-content">
    <a href="#about" id="expense">Expense:</a>
    <div class="options expense">Expense Option 1</div>
    <div class="options expense">Expense Option 2</div>
    <div class="options expense">Expense Option 3</div>
    <a href="#base" id="income">Income:</a>
    <div class="options income">Income Option 1</div>
    <div class="options income">Income Option 2</div>
    <div class="options income">Income Option 3</div>
    <a href="#blog" id="transfer">Transfer:</a>
    <div class="options transfer">Transfer Option 1</div>
    <div class="options transfer">Transfer Option 2</div>
    <div class="options transfer">Transfer Option 3</div>
  </div>
</div>