如何获取无class与id的select元素的选中选项？

方法1：通过父元素属性精准定位 #

利用外层div.form-group[data-type="service"]的属性定位内部select，再获取选中内容：

// 定位目标select
const targetSelect = document.querySelector('div.form-group[data-type="service"] select');
// 获取选中选项的文本
const selectedText = targetSelect.options[targetSelect.selectedIndex].text;
// 获取选中选项的value值
const selectedValue = targetSelect.value;

// 示例：判断是否选中MyOption2
if (selectedText === 'MyOption2') {
  console.log('已选中MyOption2');
  // 此处编写你的业务逻辑
}

方法2：结合label文本定位 #

如果页面中该label唯一，可通过label文本找到对应select：

// 遍历label元素找到匹配文本的项
const labels = document.querySelectorAll('div.form-group[data-type="service"] label');
let targetSelect;
for (const label of labels) {
  if (label.textContent.trim() === 'Mylabel') {
    targetSelect = label.nextElementSibling.querySelector('select');
    break;
  }
}

// 成功定位后获取选中项
if (targetSelect) {
  const selectedText = targetSelect.options[targetSelect.selectedIndex].text;
  console.log(selectedText);
}

方法3：实时监听选中变化 #

如果需要在用户切换选项时实时获取，绑定change事件：

const targetSelect = document.querySelector('div.form-group[data-type="service"] select');
targetSelect.addEventListener('change', function() {
  const selectedText = this.options[this.selectedIndex].text;
  const selectedValue = this.value;
  console.log('当前选中：', selectedText, selectedValue);
});

以上方法无需修改原HTML代码，完全通过元素的层级关系、父元素属性来定位目标select，解决无法添加class/id的问题。

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