HTML DOM Option 对象
HTML DOM Option 对象
HTML DOM Option 对象表示<option>
元素,即下拉列表中的一个选项。通过JavaScript,可以使用Option对象来操作和控制下拉列表。
创建 Option 对象
使用new Option(text,value,defaultSelected,selected)
来创建 Option 对象,参数分别表示选项文本、选项的值、是否默认选中、是否当前选中。其中选项文本和选项的值必须指定,其他两个参数可选,默认为false。
var optionObj = new Option("选项文本", "选项值", true, false);
访问 Option 对象属性
选项对象可以访问多个属性,以下是最常用的属性:
text
选项文本,可以用来读取或设置选项的文本内容。
var optionText = optionObj.text;
value
选项的值,可以用来读取或设置选项的值。
var optionValue = optionObj.value;
defaultSelected
选项是否默认选中,可以用来读取或设置选项是否默认选中,默认为false。
var isDefaultSelected = optionObj.defaultSelected;
selected
选项是否选中,可以用来读取或设置选项是否当前选中,默认为false。
var isSelected = optionObj.selected;
操作 Option 对象
Option对象除了常用的属性之外,还有很多操作方法,以下是其中一些方法:
add(Option, before)
向下拉列表添加一个新选项。
var selectObj = document.getElementById("select");
var optionObj = new Option("选项文本", "选项值");
selectObj.add(optionObj, null);
remove(index)
从下拉列表中删除一个选项。
var selectObj = document.getElementById("select");
selectObj.remove(1);
index
获取选项在下拉列表中的索引值。
var optionIndex = optionObj.index;
cloneNode(boolean)
复制选项节点,如果传入true,则表示深度复制,复制节点及其子元素;如果传入false,则只复制当前节点。
var clonedOption = optionObj.cloneNode(true);
toString()
返回选项对象的字符串形式。
var optionString = optionObj.toString();
示例
HTML:
<select id="select">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
JavaScript:
var selectObj = document.getElementById("select");
// 创建新选项并添加到下拉列表
var newOption = new Option("选项4", "4");
selectObj.add(newOption, null);
// 修改选项文本和值
selectObj.options[2].text = "修改后的选项文本";
selectObj.options[2].value = "修改后的选项值";
// 删除选项
selectObj.remove(0);
总结
使用HTML DOM Option 对象可以在JavaScript中操作和控制下拉列表,可以添加、删除、修改选项,也可以读取选项的文本、值、是否默认选中、是否当前选中等属性。需要注意的是,如果使用了new Option(text, value)
创建Option对象,则需要将其添加到下拉列表中才能生效。