使用选择列表对项目列表进行排序的正确方法是什么答案

【问题标题】：what is the correct way to sort list of items by using a select list使用选择列表对项目列表进行排序的正确方法是什么
【发布时间】：2021-12-04 10:36:27
【问题描述】：

假设我有一个这样的排序列表

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  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: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<div class="dropdown">
              <button class="dropSortbtn2"> Food <i class="bi bi-caret-down"></i></button>
              <div class="dropdown-content">
                <a href="#">Tomato</a>
                <a href="#">APPle</a>
                <a href="#">Carrot</a>
                <a href="#">Broccoli</a>
              </div>
            </div>

我希望该下拉列表对项目列表进行排序并隐藏其他项目，

例如，如果我有这个列表

<ul>
  <li>Tomato</li>
  <li>APPle</li>
  <li>Broccoli</li>
  <li>Carrot</li>
  <li>Tomato</li>
  <li>Broccoli</li>
</ul>

当用户点击下拉列表中的番茄时，所有项目都应该被隐藏，并且只会显示番茄元素。这样做的正确方法是什么？知道排序下拉列表会很长。

【问题讨论】：

那是你的完整代码吗？您的“下拉列表”目前看起来不像下拉列表。
这是一个自定义的下拉列表，其中 div 和标签看起来像下拉列表。我这样做是为了在下拉列表中添加更多样式，因为
那你能提供CSS和JS吗？
我没有写任何javascript代码，但这里是css和html组件w3schools.com/howto/…

标签： javascript php html sorting jquery-ui-sortable

【解决方案1】：

您可以将click 事件侦听器添加到循环通过ul 中的每个li 的所有选择选项，并隐藏那些textContent 不等于单击的选择选项的textContent 的选项。

const options = document.querySelectorAll('.dropdown .dropdown-content a')
const listItems = document.querySelectorAll('#list li');

options.forEach(f => f.addEventListener('click', function(e){
  let text = this.textContent;
  listItems.forEach(e => e.style.display = e.textContent == text ? "block" : "none")
}))

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  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: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<div class="dropdown">
  <button class="dropSortbtn2"> Food <i class="bi bi-caret-down"></i></button>
  <div class="dropdown-content">
    <a href="#">Tomato</a>
    <a href="#">APPle</a>
    <a href="#">Carrot</a>
    <a href="#">Broccoli</a>
  </div>
</div>

<ul id="list">
  <li>Tomato</li>
  <li>APPle</li>
  <li>Broccoli</li>
  <li>Carrot</li>
  <li>Tomato</li>
  <li>Broccoli</li>
</ul>

【讨论】：