正文

揭秘JS下拉列表制作技巧：轻松用input实现下拉菜单效果

/0 浏览量
0329

在网页设计中，下拉列表是一种常见的用户界面元素，用于减少表单中的选项数量，提高用户体验。传统的下拉列表通常使用HTML的<select>元素实现。然而，随着前端技术的发展，使用纯HTML和JavaScript结合<input>元素也可以实现类似下拉菜单的效果。本文将详细介绍如何使用这种方法制作下拉列表，并提供详细的代码示例。

1. 基本结构

首先，我们需要创建一个基本的HTML结构，包括一个<input>元素和一个隐藏的<ul>列表，用于存放下拉菜单的选项。

<input type="text" id="dropdownInput" readonly>
<ul id="dropdownList" style="display: none;">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>

2. CSS样式

接下来，我们需要为下拉列表添加一些基本的CSS样式，使其看起来更像一个下拉菜单。

#dropdownList {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

#dropdownList li {
  padding: 10px;
  cursor: pointer;
}

#dropdownList li:hover {
  background-color: #f5f5f5;
}

3. JavaScript逻辑

现在，我们需要使用JavaScript来处理下拉列表的显示和隐藏，以及选项的选择。

document.getElementById('dropdownInput').addEventListener('click', function() {
  var dropdownList = document.getElementById('dropdownList');
  dropdownList.style.display = dropdownList.style.display === 'block' ? 'none' : 'block';
});

document.getElementById('dropdownList').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    var input = document.getElementById('dropdownInput');
    input.value = event.target.textContent;
    document.getElementById('dropdownList').style.display = 'none';
  }
});

4. 完整示例

以下是完整的HTML、CSS和JavaScript代码，实现了一个简单的下拉列表效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉列表制作技巧</title>
<style>
  #dropdownList {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1000;
  }

  #dropdownList li {
    padding: 10px;
    cursor: pointer;
  }

  #dropdownList li:hover {
    background-color: #f5f5f5;
  }
</style>
</head>
<body>

<input type="text" id="dropdownInput" readonly>
<ul id="dropdownList" style="display: none;">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>

<script>
  document.getElementById('dropdownInput').addEventListener('click', function() {
    var dropdownList = document.getElementById('dropdownList');
    dropdownList.style.display = dropdownList.style.display === 'block' ? 'none' : 'block';
  });

  document.getElementById('dropdownList').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      var input = document.getElementById('dropdownInput');
      input.value = event.target.textContent;
      document.getElementById('dropdownList').style.display = 'none';
    }
  });
</script>

</body>
</html>

通过以上步骤，我们可以轻松地使用<input>元素和JavaScript实现一个下拉菜单效果。这种方法不仅简单易用，而且可以灵活地应用于各种场景。

-- 展开阅读全文 --