自定义GTM JavaScript变量问题：如何获取下拉菜单文本值

你可以通过以下几种方式获取下拉菜单选中项的文本：

方法一：利用selectedIndex定位选中项 #

先获取下拉元素，再通过selectedIndex拿到选中项的索引，最后读取对应option的text属性：

const selectEl = document.getElementById("c6bf8c48-f2d9-eb11-bacb-00224804ce17");
const selectedText = selectEl.options[selectEl.selectedIndex].text;
console.log(selectedText);

方法二：直接选中被勾选的option元素 #

使用CSS选择器option:checked直接定位选中的选项，再读取其文本内容：

const selectedOption = document.querySelector("#c6bf8c48-f2d9-eb11-bacb-00224804ce17 option:checked");
// 加个判断避免无选中项时报错
const selectedText = selectedOption ? selectedOption.textContent : "";
console.log(selectedText);

注意事项 #

如果你的下拉菜单是动态生成的，要确保代码在DOM完全加载后执行，可将代码放在DOMContentLoaded事件回调中：

document.addEventListener('DOMContentLoaded', function() {
  // 这里放上述获取文本的代码
});

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