今天偶然知道了new Option()这肯定要去一探究竟
一、new Option()
在MDN中句法是：new Option(text, value, defaultSelected, selected);
参数说明：
text(可选)：表示元素内容的DOMString，即显示的文本，若是没有指定，则默认值为空字符串
value(可选)：value等价的<option> 的属性。如果未指定，则将文本的值用作值，例如，将表单提交给服务器时，相关联的<select>元素的值。
defaultSelected(可选)：设置selected属性值的Boolean，就是说这个<option>是默认值，当第一次加载页面时，这个<option>是<select>元素中被选中的。若是没有指定。则默认值是false
selected(可选s)： Boolean来设置选项的选择状态; 默认是false(未选中)。如果省略，即使defaultSelected参数是true，该选项没有被选中 **
二、options
option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。
（数组中的每个元素对应一个 <option> 标签 - 由 0 起始。）
注意说明
可参考w3c:https://www.w3school.com.cn/jsref/coll_select_options.asp
options[] 集合并非一个普通的 HTMLcollection。为了和早期的浏览器向后兼容，这个集合有某种特殊的行为：允许通过 Select 对象来改变显示的选项：
1、如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
2、如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。
3、如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。
4、可以通过构造函数 Option() 来创建一个新的 option 对象（需要设置 options.length 属性）。
在html中写了<select id='select'><select>
然后js中打印了 console.log(select.options)
显示的是一个空的集合如下：
在这里插入图片描述
options的方法：
options.add(option)方法向集合里添加一项option对象；
options.remove(index)方法移除options集合中的指定项；
三、Select 对象
Select 对象代表 HTML 表单中的一个下拉列表。
在 HTML 表单中，<select> 标签每出现一次，一个 Select 对象就会被创建
参考w3c:https://www.w3school.com.cn/jsref/dom_obj_select.asp
select 对象方法:
add() 向下拉列表添加一个选项。
blur() 从下拉列表移开焦点。
focus() 在下拉列表上设置焦点。
remove() 从下拉列表中删除一个选项。
如：
var select.=document.getElementById('select'); //根据id查找对象，
1、添加一个option选项
select.add(new Option("文本","值")); //这个只能在IE中有效
select.options.add(new Option("text","value")); //这个兼容IE与firefox
2、删除所有选项option
select.options.length=0;
3、删除一个选项option
var index=select.selectedIndex; //index,要删除选项的序号，这里取当前选中选项的序号
selext.options.remove(index);
----今天的探究到此为止了，有啥问题可以多多提出来----end------
网友评论