如何在 JavaScript 中获取选定的列表项值

当我们在 HTML 中使用列表（<ul> 或 <ol>）时，用户可能会选择其中一个列表项。那么，在 JavaScript 中如何获取用户选择的列表项的值呢？本文将为您介绍如何实现这个功能。

1. 使用 querySelectorAll 和 addEventListener 监听点击事件

我们可以使用 querySelectorAll 方法获取所有的列表项，然后使用 addEventListener 监听 click 事件。当用户单击某个列表项时，将会触发回调函数。

const listItems = document.querySelectorAll('li');

listItems.forEach((item) => {
  item.addEventListener('click', (event) => {
    // 在此处添加您的代码
  });
});

2. 获取选定列表项的值

获取选定列表项的值有两种方法：

2.1. 使用 textContent 属性获取纯文本内容

如果您只需要获取选定列表项的纯文本内容（即不包含任何 HTML 标记），您可以使用 textContent 属性。

const listItems = document.querySelectorAll('li');

listItems.forEach((item) => {
  item.addEventListener('click', (event) => {
    const selectedValue = event.target.textContent;
    console.log(selectedValue);
  });
});

2.2. 使用 getAttribute 方法获取自定义属性值

如果您需要从选定的列表项中获取自定义属性的值，可以使用 getAttribute 方法。例如，如果您在列表项 <li> 元素中定义了自定义属性 data-id，您可以使用以下代码获取选定列表项的 data-id 值：

const listItems = document.querySelectorAll('li');

listItems.forEach((item) => {
  item.addEventListener('click', (event) => {
    const selectedValue = event.target.getAttribute('data-id');
    console.log(selectedValue);
  });
});

3. 示例代码和演示

您可以参考以下示例代码，了解如何获取选定列表项的值。本示例演示了如何使用 querySelectorAll 和 addEventListener 监听列表项的 click 事件，并输出选定列表项的值到控制台。

<ul>
  <li data-id="1">选项 1</li>
  <li data-id="2">选项 2</li>
  <li data-id="3">选项 3</li>
</ul>

const listItems = document.querySelectorAll('li');

listItems.forEach((item) => {
  item.addEventListener('click', (event) => {
    const selectedValue = event.target.getAttribute('data-id');
    console.log(selectedValue);
  });
});

您可以在以下 CodePen 演示中查看该示例的在线演示：

点击此处以在 CodePen 中打开示例演示

4. 结论

以上就是获取选定列表项值的方法。通过使用 querySelectorAll 和 addEventListener 监听点击事件，您可以获取选定的列表项的值，使用 textContent 获取纯文本内容或使用 getAttribute 获取自定义属性的值。