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

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

DDD

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

原创

781人浏览过

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

本文档详细介绍了如何使用 HTML、CSS 和 JavaScript 创建一个动态下拉列表，该列表从 JSON 数据源获取选项，并允许用户搜索和选择项目。我们将重点介绍如何正确地将事件处理程序附加到下拉列表选项，以便在选择项目时能够捕获并显示其值。此外，还将介绍如何使用 CSS 来增强下拉列表的样式和用户体验。

创建动态下拉列表

首先，我们需要一个 HTML 结构来容纳下拉列表。这包括一个触发下拉菜单的按钮和一个用于显示选项的容器。

<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 从 JSON 数据动态填充下拉列表。关键在于使用 document.createElement() 创建新的 <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");
    // 将国家/地区 ID 保存在其 value 属性中
    countryOption.setAttribute('value', country[i]['ID']);
    // 将国家/地区名称作为其 innerText
    countryOption.innerText = country[i]['Country_Name'];
    // 将类 dropdown-option 添加到选项元素
    countryOption.classList.add('dropdown-option');

    // 将 countryOnClick 函数（在下面定义）绑定为单击事件处理程序
    countryOption.addEventListener('click', countryOnClick);

    // 将新锚点附加到下拉元素
    ele.appendChild(countryOption);
  }
}

登录后复制

处理选项选择

现在，我们需要一个函数来处理选择下拉列表中的选项。此函数应检索所选选项的值并执行所需的操作，例如在控制台中显示该值或更新页面上的其他元素。

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

// 下拉选项的单击事件处理程序
function countryOnClick(event) {
  // 从触发事件的元素中获取国家/地区属性
  const clickedOption = event.target;
  const countryID = clickedOption.getAttribute('value');
  const countryName = clickedOption.innerText;

  // 从下拉菜单中的每个选项中删除 selectedOption 类
  clickedOption.closest('div').querySelectorAll('.dropdown-option').forEach((o, i) => {
    o.classList.remove('selectedOption');
  });
  // 将 selectedOption 类添加到选定的选项元素
  clickedOption.classList.add('selectedOption');

  // 在控制台中显示这些数据
  console.log(`${countryID} - ${countryName}`);

  console.log(getSelectedOption());
}

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

登录后复制

此代码首先获取所单击的选项的 ID 和名称。然后，它从所有其他选项中删除 selectedOption 类，并将该类添加到所单击的选项。最后，它将 ID 和名称记录到控制台。 getSelectedOption 函数可用于获取当前选定的选项。

芦笋演示

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

查看详情

添加搜索功能

为了增强用户体验，我们可以添加一个搜索功能来过滤下拉列表中的选项。这可以使用 onkeyup 事件处理程序和一些 JavaScript 来完成。

// 当过滤器输入更改时调用，它会过滤下拉选项列表
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";
    }
  }
}

登录后复制

此代码获取搜索输入的值并将其转换为大写。然后，它循环遍历下拉列表中的所有选项，并显示与搜索输入匹配的选项。

样式化下拉列表

最后，我们可以使用 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;
}

登录后复制

此 CSS 代码设置搜索输入和下拉列表本身的样式。它还添加了一个悬停效果，并在选择选项时更改背景颜色。