使用 HTML、CSS 和 JavaScript 显示下拉菜单选中项-html教程-PHP中文网

使用 HTML、CSS 和 JavaScript 显示下拉菜单选中项

花韻仙語

发布： 2025-09-26 19:30:01

原创

533人浏览过

使用 html、css 和 javascript 显示下拉菜单选中项

本文旨在指导开发者如何使用 HTML、CSS 和 JavaScript 创建一个动态下拉菜单，并实现选中项的显示功能。我们将详细介绍如何从 JSON 数据动态生成下拉列表，添加搜索功能，并在用户选择某个选项后，将其值显示在页面上。通过本文，你将掌握构建交互式下拉菜单的关键技术。

创建 HTML 结构

首先，我们需要创建基本的 HTML结构来容纳下拉菜单。这包括一个按钮用于触发下拉菜单的显示，一个 div 元素作为下拉菜单的容器，以及一个输入框用于搜索选项。

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search..." id="myInput" onkeyup="filterFunction()">
  </div>
</div>

登录后复制

使用 JavaScript 动态生成下拉列表

接下来，使用 JavaScript 从 JSON 数据动态生成下拉列表。我们创建一个包含国家信息的 JSON 数组，并使用循环遍历该数组，为每个国家创建一个 <a> 元素，并将其添加到下拉菜单容器中。

function myFunction() {
  var country = [
    { "ID": "001", "Country_Name": "India" },
    { "ID": "002", "Country_Name": "Australia" },
    { "ID": "003", "Country_Name": "Austria" },
    { "ID": "004", "Country_Name": "China" },
    { "ID": "005", "Country_Name": "Bangladesh" }
  ];

  document.getElementById("myDropdown").classList.toggle("show");
  var ele = document.getElementById("myDropdown");

  for (var i = 0; i < country.length; i++) {
    const countryOption = document.createElement("a");
    countryOption.setAttribute('value', country[i]['ID']);
    countryOption.innerText = country[i]['Country_Name'];
    countryOption.classList.add('dropdown-option');
    countryOption.addEventListener('click', countryOnClick);
    ele.appendChild(countryOption);
  }
}

登录后复制

这段代码首先定义了一个包含国家信息的 JSON 数组 country。然后，它获取 id 为 myDropdown 的元素（即下拉菜单的容器），并切换其 show 类，以显示或隐藏下拉菜单。接下来，它遍历 country 数组，为每个国家创建一个 <a> 元素，并设置其 value 属性为国家的 ID，innerText 属性为国家的名称。然后，它为每个 <a> 元素添加一个 click 事件监听器，当用户点击某个国家时，将触发 countryOnClick 函数。最后，它将新创建的 <a> 元素添加到下拉菜单容器中。

立即学习“Java免费学习笔记（深入）”；

实现搜索功能

为了方便用户查找选项，我们添加一个搜索功能。当用户在输入框中输入内容时，JavaScript 代码会根据输入的内容过滤下拉列表中的选项。

function filterFunction() {
  var input, filter, div, a, i, txtValue;
  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";
    }
  }
}

登录后复制

这段代码首先获取输入框的值，并将其转换为大写。然后，它获取下拉菜单容器中的所有 <a> 元素。接下来，它遍历这些 <a> 元素，并检查它们的文本内容是否包含输入框中的值。如果包含，则显示该 <a> 元素；否则，隐藏该 <a> 元素。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

显示选中项

当用户选择某个选项时，我们需要将其值显示在页面上。这可以通过 JavaScript 代码来实现。当用户点击某个选项时，我们获取该选项的值，并将其显示在指定的元素中。

function countryOnClick(event) {
  const clickedOption = event.target;
  const countryID = clickedOption.getAttribute('value');
  const countryName = clickedOption.innerText;

  clickedOption.closest('div').querySelectorAll('.dropdown-option').forEach((o, i) => {
    o.classList.remove('selectedOption');
  });
  clickedOption.classList.add('selectedOption');

  console.log(`${countryID} - ${countryName}`);

  console.log(getSelectedOption());
}

function getSelectedOption() {
  return document.querySelector('#myDropdown > .dropdown-option.selectedOption');
}

登录后复制

这段代码首先获取被点击的 <a> 元素，并获取其 value 属性和 innerText 属性，分别表示国家的 ID 和名称。然后，它从下拉菜单容器中移除所有 <a> 元素的 selectedOption 类，并将被点击的 <a> 元素的 selectedOption 类添加到下拉菜单容器中。接下来，它将国家的 ID 和名称输出到控制台。最后，它调用 getSelectedOption 函数，该函数返回当前选中的 <a> 元素。

添加 CSS 样式

为了使下拉菜单看起来更美观，我们可以添加一些 CSS 样式。

#myInput {
  box-sizing: border-box;
  background-image: url('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;
}

position: relative;
display: inline-block;

}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.show {
  display: block;
}

.dropdown-content > .dropdown-option{
  cursor: pointer;
}

.dropdown-content > .selectedOption{
  background-color: darkgray !important;
}

登录后复制

这段代码定义了输入框、下拉菜单容器和 <a> 元素的样式。它还定义了当鼠标悬停在 <a> 元素上时和当 <a> 元素被选中时的样式。