如何使用Javascript自动提取下拉菜单中的选项列表？

当然可以实现，以下是几种简单直接的方式：

方法一：基础遍历法 #

先定位到下拉列表元素，再获取所有选项并提取文本：

// 定位下拉列表（这里假设下拉列表的id是"sizeSelect"，可根据实际调整选择器）
const dropdown = document.getElementById('sizeSelect');
// 获取所有<option>元素
const allOptions = dropdown.querySelectorAll('option');
// 提取每个选项的文本内容，并存入数组
const optionTexts = [];
allOptions.forEach(option => {
  optionTexts.push(option.textContent.trim());
});

// 输出结果：可以控制台打印，也可以在页面展示
console.log(optionTexts); // 输出数组形式：["4-6 years", "8-10 years", ...]

// 若要在页面展示为项目符号列表
const list = document.createElement('ul');
optionTexts.forEach(text => {
  const listItem = document.createElement('li');
  listItem.textContent = text;
  list.appendChild(listItem);
});
// 把列表添加到页面指定位置，比如body
document.body.appendChild(list);

方法二：简洁写法 #

利用Array.from的映射功能，一行搞定文本提取：

// 直接提取所有选项文本到数组
const optionTexts = Array.from(
  document.querySelectorAll('#sizeSelect option'),
  opt => opt.textContent.trim()
);

// 如果要输出单行逗号分隔的文本
console.log(optionTexts.join(', ')); // 输出：4-6 years, 8-10 years, ...

注意事项 #

• 选择器要根据实际页面调整：如果下拉列表没有id，可用document.querySelector('select')获取页面第一个下拉框，或者用属性选择器如select[name="clothing-size"]精准定位。
• trim()用于去除文本前后的空格，避免多余空白。

内容的提问来源于stack exchange，提问作者Sockie