当前位置：首页 > JavaScript

js实现选集

2026-04-06 08:26:30JavaScript

实现基本的选集功能

使用JavaScript实现选集功能通常涉及DOM操作和事件监听。以下是一个简单的实现示例，允许用户通过点击选择多个元素：

document.addEventListener('DOMContentLoaded', function() {
  const selectableItems = document.querySelectorAll('.selectable-item');

  selectableItems.forEach(item => {
    item.addEventListener('click', function() {
      this.classList.toggle('selected');
    });
  });
});

对应的CSS样式：

.selectable-item {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.selectable-item.selected {
  background-color: #007bff;
  color: white;
}

支持Shift键多选

为选集功能添加Shift键多选支持，允许用户通过Shift键选择连续范围内的项目：

let lastSelected = null;

document.addEventListener('DOMContentLoaded', function() {
  const selectableItems = document.querySelectorAll('.selectable-item');

  selectableItems.forEach(item => {
    item.addEventListener('click', function(e) {
      if (e.shiftKey && lastSelected) {
        const items = Array.from(selectableItems);
        const start = items.indexOf(lastSelected);
        const end = items.indexOf(this);

        const [startIdx, endIdx] = [Math.min(start, end), Math.max(start, end)];

        items.slice(startIdx, endIdx + 1).forEach(el => {
          el.classList.add('selected');
        });
      } else {
        this.classList.toggle('selected');
      }

      lastSelected = this;
    });
  });
});

实现全选/取消全选功能

添加全选和取消全选的控制按钮：

document.getElementById('select-all').addEventListener('click', function() {
  document.querySelectorAll('.selectable-item').forEach(item => {
    item.classList.add('selected');
  });
});

document.getElementById('deselect-all').addEventListener('click', function() {
  document.querySelectorAll('.selectable-item').forEach(item => {
    item.classList.remove('selected');
  });
});

获取选中项的数据

提供获取所有选中项数据的方法：

function getSelectedItems() {
  const selected = [];
  document.querySelectorAll('.selectable-item.selected').forEach(item => {
    selected.push({
      id: item.dataset.id,
      text: item.textContent
    });
  });
  return selected;
}

使用事件委托优化性能

对于大量可选元素，使用事件委托可以提高性能：

document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('selectable-container');

  container.addEventListener('click', function(e) {
    if (e.target.classList.contains('selectable-item')) {
      e.target.classList.toggle('selected');
    }
  });
});

添加拖拽选择支持

实现通过鼠标拖拽进行框选的功能：

let isDragging = false;
let startX, startY;

document.addEventListener('mousedown', function(e) {
  if (e.target.classList.contains('selectable-container')) {
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;

    const selectionBox = document.createElement('div');
    selectionBox.className = 'selection-box';
    selectionBox.style.left = startX + 'px';
    selectionBox.style.top = startY + 'px';
    document.body.appendChild(selectionBox);
  }
});

document.addEventListener('mousemove', function(e) {
  if (!isDragging) return;

  const selectionBox = document.querySelector('.selection-box');
  const currentX = e.clientX;
  const currentY = e.clientY;

  selectionBox.style.width = Math.abs(currentX - startX) + 'px';
  selectionBox.style.height = Math.abs(currentY - startY) + 'px';
  selectionBox.style.left = Math.min(currentX, startX) + 'px';
  selectionBox.style.top = Math.min(currentY, startY) + 'px';
});

document.addEventListener('mouseup', function() {
  if (isDragging) {
    isDragging = false;
    const selectionBox = document.querySelector('.selection-box');
    if (selectionBox) selectionBox.remove();
  }
});

对应的CSS样式：

js实现选集

.selection-box {
  position: absolute;
  background-color: rgba(0, 123, 255, 0.3);
  border: 1px solid #007bff;
  pointer-events: none;
  z-index: 1000;
}

这些方法提供了从基础到进阶的选集功能实现，可以根据具体需求进行组合和扩展。