js获取下拉列表框<option>中的value和text的值示例代码

// 假设HTML结构中有一个下拉列表框如下：
// <select id="mySelect">
//   <option value="1">选项1</option>
//   <option value="2">选项2</option>
//   <option value="3">选项3</option>
// </select>

// 使用JavaScript获取当前选中<option>的value和text

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

// 获取当前选中项的value
var selectedValue = selectElement.value;
console.log("Selected Value:", selectedValue);

// 获取当前选中项的text，需要使用一点额外的逻辑
// 因为<select>元素本身没有直接获取选中项文本的方法
var selectedOption = selectElement.options[selectElement.selectedIndex];
var selectedText = selectedOption.text;
console.log("Selected Text:", selectedText);

这段代码首先通过`document.getElementById`获取了具有特定ID的``元素。然后，它直接访问了该元素的`value`属性来获取当前选中项的`value`值。为了获取选中项的文本内容（即``元素中显示的文本），代码首先通过`selectedIndex`属性确定了选中项的位置，然后使用这个位置索引来访问``元素的`options`集合中的相应``元素，并最后读取该``元素的`text`属性。