HTML DOM 选取框对象

HTML DOM 选取框对象是一种表示 HTML 选取框的 JavaScript 对象。开发人员可以通过操作选取框对象来控制和获取选取框的状态和信息。本文将介绍如何使用 JavaScript 操作 HTML DOM 选取框对象。

获取选取框对象

要获取页面中的选取框对象，开发人员可以使用 document.getElementById() 方法。例如，如果选取框的 id 属性为 "mySelect"，可以这样获取它的选取框对象：

let selectObj = document.getElementById("mySelect");

操作选取框对象

获取选中的选项

要获取选取框中当前选中的选项，可以使用 selectedOptions 属性。这个属性返回一个 HTMLSelectElement 对象的列表，其中包含了所有被选中的选项。

let selectedOptions = selectObj.selectedOptions;  // 获取选中的选项
for (let i = 0; i < selectedOptions.length; i++) {
  console.log(selectedOptions[i].text);  // 输出选中的选项文本
}

设置选中的选项

要设置选取框中选中的选项，可以设置 option 对象的 selected 属性。例如，要选择第二个选项，可以这样操作：

selectObj.options[1].selected = true;  // 选中第二个选项

添加和删除选项

要添加和删除选项，可以使用 add() 和 remove() 方法。例如，要在第一个位置添加一个选项，可以这样操作：

let option = document.createElement("option");
option.text = "New Option";
selectObj.add(option, selectObj.options[0]);  // 添加一个选项到第一个位置

要删除第一个选项，可以这样操作：

selectObj.remove(0);  // 删除第一个选项

总结

本文介绍了如何使用 JavaScript 操作 HTML DOM 选取框对象。开发人员可以通过获取选取框对象、获取选中的选项、设置选中的选项、添加和删除选项来控制和管理选取框的状态和信息。