JS+DIV+CSS实现仿表单下拉列表效果

下面是JS+DIV+CSS实现仿表单下拉列表效果的完整攻略：

一、实现思路

在HTML中定义一个表单元素
使用CSS美化表单元素的样式
使用JavaScript控制下拉列表的显示与隐藏，并将选中的值显示到表单元素中

二、具体实现步骤

1. HTML结构

在HTML中定义一个表单元素，并使用div元素模拟下拉列表的选项：

<div class="dropdown">
  <input type="hidden" name="city">
  <div class="dropdown-menu">
    <div class="dropdown-item" data-value="bj">北京</div>
    <div class="dropdown-item" data-value="sh">上海</div>
    <div class="dropdown-item" data-value="gz">广州</div>
    <div class="dropdown-item" data-value="sz">深圳</div>
  </div>
</div>

其中，dropdown类名用于控制下拉列表的样式，dropdown-menu类名用于控制下拉列表选项的样式，dropdown-item类名用于控制每个选项的样式。

input元素的type属性为hidden，用于隐藏输入框，实际表单值将通过JavaScript获取选中的值进行赋值。

2. CSS样式

通过CSS设置表单元素的外观并控制下拉列表的显示与隐藏，以下是dropdown和dropdown-menu的样式：

.dropdown {
  position: relative;
  width: 120px;
  height: 26px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.dropdown:hover {
  border-color: #888;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  z-index: 999;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
}

.dropdown-menu.show {
  display: block;
}

其中，dropdown的样式设置了宽度、高度、边框样式及圆角效果，并且鼠标移动到表单上时会改变边框的颜色。

dropdown-menu的样式设置了绝对定位，隐藏选项列表，同时设置了z-index属性以保证下拉列表在其他元素上面。同时还设置了边框、圆角以及背景颜色。在选中表单元素并且鼠标移动到下拉列表时，会显示出选项列表，这个效果通过为dropdown-menu添加show类名来实现。

以下是dropdown-item的样式：

.dropdown-item {
  padding: 5px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

所有选项都共用同一个类名，并且设置了内边距和鼠标样式。当鼠标移动到选项上时，该选项的背景颜色会发生改变。

3. JavaScript交互

在JavaScript中，通过添加事件监听器来控制下拉列表的显示与隐藏，并且在选中某个选项时，将该选项的值赋值给表单元素。

var dropdown = document.querySelector('.dropdown');
var input = dropdown.querySelector('input[type=hidden]');
var menu = dropdown.querySelector('.dropdown-menu');

// 显示下拉列表
function showMenu() {
  menu.classList.add('show');
}

// 隐藏下拉列表
function hideMenu() {
  menu.classList.remove('show');
}

// 选中某个选项
function selectItem(item) {
  input.value = item.dataset.value;
  dropdown.querySelector('.dropdown-value').textContent = item.textContent;
  hideMenu();
}

// 事件监听
dropdown.addEventListener('click', function() {
  if (menu.classList.contains('show')) {
    hideMenu();
  } else {
    showMenu();
  }
});

menu.addEventListener('click', function(e) {
  if (e.target.classList.contains('dropdown-item')) {
    selectItem(e.target);
  }
});

document.addEventListener('click', function(e) {
  if (!dropdown.contains(e.target)) {
    hideMenu();
  }
});

首先通过querySelector方法获取表单元素、下拉列表及选项元素。在showMenu和hideMenu方法中，通过添加/移除show类名来控制下拉列表的显示与隐藏。在选中某个选项时，将该选项的值赋值给表单元素并将选项的文本内容赋值给下拉列表的显示区域，然后再隐藏下拉列表。

最后通过事件监听器来实现以下功能：

点击表单时显示/隐藏下拉列表
点击选项时选中该选项并隐藏下拉列表
点击页面中的其他任意位置时隐藏下拉列表

4. 示例1

以下是一个简单的示例，实现了对性别的选择：

<div class="dropdown">
  <input type="hidden" name="gender">
  <div class="dropdown-value">请选择性别</div>
  <div class="dropdown-menu">
    <div class="dropdown-item" data-value="male">男</div>
    <div class="dropdown-item" data-value="female">女</div>
  </div>
</div>

.dropdown {
  position: relative;
  width: 120px;
  height: 26px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.dropdown:hover {
  border-color: #888;
}

.dropdown-value {
  padding: 5px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  z-index: 999;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  padding: 5px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

var dropdown = document.querySelector('.dropdown');
var input = dropdown.querySelector('input[type=hidden]');
var menu = dropdown.querySelector('.dropdown-menu');

function showMenu() {
  menu.classList.add('show');
}

function hideMenu() {
  menu.classList.remove('show');
}

function selectItem(item) {
  input.value = item.dataset.value;
  dropdown.querySelector('.dropdown-value').textContent = item.textContent;
  hideMenu();
}

dropdown.addEventListener('click', function() {
  if (menu.classList.contains('show')) {
    hideMenu();
  } else {
    showMenu();
  }
});

menu.addEventListener('click', function(e) {
  if (e.target.classList.contains('dropdown-item')) {
    selectItem(e.target);
  }
});

document.addEventListener('click', function(e) {
  if (!dropdown.contains(e.target)) {
    hideMenu();
  }
});

5. 示例2

以下是一个扩展的示例，实现了对城市的选择：

<div class="dropdown">
  <input type="hidden" name="city">
  <div class="dropdown-value">请选择城市</div>
  <div class="dropdown-menu">
    <div class="dropdown-header">ABCD</div>
    <div class="dropdown-item" data-value="bj">北京</div>
    <div class="dropdown-item" data-value="cq">重庆</div>
    <div class="dropdown-item" data-value="cd">成都</div>
    <div class="dropdown-header">EFGH</div>
    <div class="dropdown-item" data-value="fs">佛山</div>
    <div class="dropdown-item" data-value="gz">广州</div>
    <div class="dropdown-item" data-value="wh">武汉</div>
    <div class="dropdown-header">IJKL</div>
    <div class="dropdown-item" data-value="jn">济南</div>
    <div class="dropdown-item" data-value="ly">洛阳</div>
    <div class="dropdown-item" data-value="lz">兰州</div>
    <div class="dropdown-header">MNOP</div>
    <div class="dropdown-item" data-value="sh">上海</div>
    <div class="dropdown-item" data-value="sz">深圳</div>
    <div class="dropdown-header">QRST</div>
    <div class="dropdown-item" data-value="tj">天津</div>
    <div class="dropdown-header">UVWX</div>
    <div class="dropdown-item" data-value="xa">西安</div>
    <div class="dropdown-item" data-value="xm">厦门</div>
  </div>
</div>

.dropdown {
  position: relative;
  width: 120px;
  height: 26px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.dropdown:hover {
  border-color: #888;
}

.dropdown-value {
  padding: 5px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  z-index: 999;
  width: 180px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  padding: 3px 5px;
  font-weight: bold;
  color: #999;
}

.dropdown-item {
  padding: 5px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

var dropdown = document.querySelector('.dropdown');
var input = dropdown.querySelector('input[type=hidden]');
var menu = dropdown.querySelector('.dropdown-menu');
var headers = menu.querySelectorAll('.dropdown-header');

function showMenu() {
  menu.classList.add('show');
}

function hideMenu() {
  menu.classList.remove('show');
}

function selectItem(item) {
  input.value = item.dataset.value;
  dropdown.querySelector('.dropdown-value').textContent = item.textContent;
  hideMenu();
}

dropdown.addEventListener('click', function() {
  if (menu.classList.contains('show')) {
    hideMenu();
  } else {
    showMenu();
  }
});

menu.addEventListener('click', function(e) {
  if (e.target.classList.contains('dropdown-item')) {
    selectItem(e.target);
  }
});

document.addEventListener('click', function(e) {
  if (!dropdown.contains(e.target)) {
    hideMenu();
  }
});

// 添加头部字母索引
for (var i = 0; i < headers.length; i++) {
  var prev = headers[i].previousElementSibling;
  var next = headers[i].nextElementSibling;
  while (next && !next.classList.contains('dropdown-header')) {
    next.dataset.header = headers[i].textContent;
    next = next.nextElementSibling;
  }
  if (prev) {
    prev.dataset.header = headers[i].textContent;
  }
}

与示例1相比，这个示例添加了一个新的头部标题，用于将所有选项按字母进行分类并索引。这个示例中，需要单独处理每个头部元素和它下面的选项，将它们的data-header属性设置为该头部元素的文本内容。通过这种方式，处理好索引信息后，可以选择给所有选项添加相应的字母索引等附加功能。

三、总结

通过以上步骤和示例，我们可以简单地实现一个基于JS+DIV+CSS的仿表单下拉列表效果。可以根据具体需要，通过修改CSS样式、HTML结构和JavaScript代码等实现更多的交互效果和附加功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+DIV+CSS实现仿表单下拉列表效果 - Python技术站