当前位置：首页 > JavaScript

js实现listbox

2026-02-01 01:54:40JavaScript

实现 ListBox 的基本结构

使用 HTML 和 JavaScript 创建一个基础的 ListBox，需要 <select> 元素作为容器，并通过 JavaScript 动态添加或操作选项。

HTML 结构

<select id="myListBox" size="5"></select>
<button onclick="addItem()">添加选项</button>
<button onclick="removeItem()">删除选中项</button>

JavaScript 逻辑

// 获取 ListBox 元素
const listBox = document.getElementById("myListBox");

// 添加选项
function addItem() {
  const itemText = prompt("输入选项文本:");
  if (itemText) {
    const option = new Option(itemText, itemText);
    listBox.add(option);
  }
}

// 删除选中项
function removeItem() {
  const selectedIndex = listBox.selectedIndex;
  if (selectedIndex >= 0) {
    listBox.remove(selectedIndex);
  }
}

动态加载数据

通过 JavaScript 动态从数组或 API 加载数据到 ListBox。

示例代码

// 模拟数据
const data = ["选项1", "选项2", "选项3"];

// 加载数据到 ListBox
function loadData() {
  listBox.innerHTML = ""; // 清空现有选项
  data.forEach(item => {
    const option = new Option(item, item);
    listBox.add(option);
  });
}

// 调用加载函数
loadData();

多选功能支持

通过设置 multiple 属性允许用户多选，并调整 JavaScript 逻辑。

HTML 调整

<select id="myListBox" size="5" multiple></select>

JavaScript 删除多选逻辑

function removeItem() {
  // 获取所有选中项的索引（反向遍历避免删除时索引变化）
  Array.from(listBox.selectedOptions)
    .reverse()
    .forEach(option => listBox.remove(option.index));
}

事件监听与交互

为 ListBox 添加事件监听（如双击删除、选中高亮等）。

示例代码

// 双击删除选项
listBox.addEventListener("dblclick", () => {
  removeItem();
});

// 选中项高亮逻辑（通过 CSS 类）
listBox.addEventListener("change", () => {
  Array.from(listBox.options).forEach(opt => {
    opt.classList.toggle("highlight", opt.selected);
  });
});

CSS 样式

.highlight {
  background-color: #007bff;
  color: white;
}

排序与搜索功能

扩展 ListBox 功能，支持选项排序或过滤。

排序实现

function sortItems() {
  const options = Array.from(listBox.options);
  options.sort((a, b) => a.text.localeCompare(b.text));
  listBox.innerHTML = "";
  options.forEach(opt => listBox.add(opt));
}

搜索过滤实现

function filterItems() {
  const searchTerm = prompt("输入搜索关键词:").toLowerCase();
  Array.from(listBox.options).forEach(opt => {
    opt.hidden = !opt.text.toLowerCase().includes(searchTerm);
  });
}