HTML 如何查找选中的 < option> （无需使用 jQuery）

HTML 如何查找选中的 < option> （无需使用 jQuery）

单元表格：

详细解释：

1、获取所有选项元素：

在 HTML 中，可以使用 <select> 标签来创建下拉列表，要查找选中的 <option>，首先需要获取所有的选项元素，可以通过 <select> 元素的 options 属性来获取选项元素集合，假设有一个名为 mySelect 的下拉列表，可以使用以下代码获取其选项元素集合：

“`javascript

var selectElement = document.getElementById("mySelect");

var options = selectElement.options;

“`

2、遍历选项元素，检查其是否被选中：

接下来，可以遍历选项元素集合，检查每个选项元素是否被选中，在 HTML 中，默认情况下，没有被选中的选项元素的 selected 属性为 false，而被选中的选项元素的 selected 属性为 true，可以通过判断选项元素的 selected 属性来确定其是否被选中，可以使用以下代码遍历选项元素集合并检查其是否被选中：

“`javascript

for (var i = 0; i < options.length; i++) {

if (options[i].selected) {

// 执行相应的操作

}

}

“`

3、如果选项元素被选中，执行相应的操作：

如果某个选项元素被选中，可以在相应的位置执行所需的操作，根据具体需求，可以在该部分编写相应的代码逻辑，可以将选中的选项元素的值打印到控制台或将其显示在页面上，以下是一个简单的示例代码：

“`javascript

for (var i = 0; i < options.length; i++) {

if (options[i].selected) {

console.log(options[i].value); // 将选中的选项元素的值打印到控制台

}

}

“`

相关问题与解答：

问题1：如何在选中的 &lt; option&gt; 发生变化时执行相应的操作？

答：可以使用事件监听器来监听下拉列表的变化事件，当用户选择不同的选项时，会触发相应的事件，可以使用 JavaScript 中的 addEventListener 方法来添加事件监听器，可以使用以下代码监听下拉列表的变化事件并在选中的选项发生变化时执行相应的操作：

var selectElement = document.getElementById("mySelect");
selectElement.addEventListener("change", function() {
  var selectedOption = selectElement.options[selectElement.selectedIndex];
  console.log(selectedOption.value); // 将选中的选项元素的值打印到控制台
});

问题2：如何取消选中的 &lt; option&gt;？

答：要取消选中的 <option>，可以通过设置其 selected 属性为 false，可以使用 JavaScript 中的 selectedIndex 属性获取当前选中的选项元素的索引，然后通过该索引修改其 selected 属性，可以使用以下代码取消选中的选项元素：

var selectElement = document.getElementById("mySelect");
selectElement.selectedIndex = 1; // 取消选中所有选项元素