Js获取下拉框选定项的值和文本的实现代码

在JavaScript中，获取下拉框（``元素）选定项的值和文本可以通过访问该元素的`value`属性以及选定`option`元素的`textContent`或`innerText`属性来实现。以下是一个简单的实现示例：

// 假设HTML中有一个select元素，其id为"mySelect"
<select id="mySelect">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

// JavaScript代码
// 获取select元素
var selectElement = document.getElementById("mySelect");

// 当select元素的值发生变化时，执行以下函数
selectElement.onchange = function() {
  // 获取选定项的值
  var selectedValue = this.value;
  
  // 获取选定option元素
  var selectedOption = this.options[this.selectedIndex];
  
  // 获取选定项的文本
  var selectedText = selectedOption.textContent || selectedOption.innerText; // 兼容性考虑
  
  // 输出结果到控制台，实际应用中可以根据需要处理这些值
  console.log("选定的值:", selectedValue);
  console.log("选定的文本:", selectedText);
};

在这个示例中，我们首先通过`document.getElementById`获取到`

`元素。然后，我们为这个元素添加了一个`onchange`事件监听器，以便在选定项改变时执行一段函数。在这个函数中，我们首先通过`this.value`获取到选定项的值，然后通过`this.options[this.selectedIndex]`获取到选定的``元素。最后，我们通过`textContent`或`innerText`属性（考虑到兼容性，这里使用了逻辑或操作符`||`来确保至少有一个属性是可用的）来获取到选定项的文本，并将这些值输出到控制台。

请注意，这里假设``元素已经存在于HTML文档中，并且具有一个唯一的`id`，以便我们可以通过`document.getElementById`来访问它。在实际应用中，你可能需要根据实际情况来调整这些代码。

---