如何获取下拉框选中值并打印至控制台？

你不需要复杂的克隆操作，直接用原生DOM API就能轻松获取下拉框的选中值并打印到控制台，两种常用需求的实现方式如下：

1. 获取选中项的value值 #

直接访问<select>元素的value属性即可，这是最直接的方式：

const selectEl = document.getElementById("OBJ_TYPE");
console.log("选中值：", selectEl.value);

2. 获取选中项的显示文本 #

如果需要拿到下拉框显示的文字，通过selectedIndex定位到选中的<option>，再取它的text属性：

const selectEl = document.getElementById("OBJ_TYPE");
console.log("选中文本：", selectEl.options[selectEl.selectedIndex].text);

完整简化示例 #

把这些逻辑整合到按钮点击事件里，去掉多余的克隆代码，最终代码如下：

HTML

<button id="buttonTest" title="Test" style="visibility: visible; background-color: #f6f6f6; font-weight: bold;">
  <i class="fa fa-refresh"></i> Test
</button>
<div id="cloneThis">
  <td class="componentellipsis" id="recordTypeWrapper">
    <select id="OBJ_TYPE" class="newstepselect">
      <option value="TP">TP</option>
      <option value="Workflow">Workflow</option>
      <option value="Package">Package</option>
    </select>
  </td>
</div>

JavaScript

// 监听按钮点击
document.getElementById("buttonTest").addEventListener("click", () => {
  const selectEl = document.getElementById("OBJ_TYPE");
  // 打印选中值
  console.log("选中值：", selectEl.value);
  // 打印选中文本
  console.log("选中文本：", selectEl.options[selectEl.selectedIndex].text);
});

// 页面加载时先执行一次
const selectEl = document.getElementById("OBJ_TYPE");
console.log("初始选中值：", selectEl.value);
console.log("初始选中文本：", selectEl.options[selectEl.selectedIndex].text);

这样就能实现你要的效果——不管下拉框选了什么，点击按钮或者页面加载时，都会把选中值/文本打印到控制台，完全不需要克隆节点的操作。

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