跳至主要內容

11.6 <option> 元素

AI悦创原创JavaScript tutorialJavaScript tutorial大约 2 分钟...约 672 字

<option>元素表示下拉框(<select><optgroup><datalist>)里面的一个选项。它是 HTMLOptionElement 接口的实例。

属性

除了继承 HTMLElement 接口的属性和方法,HTMLOptionElement 接口具有下面的属性。

  • disabled:布尔值,表示该项是否可选择。
  • defaultSelected:布尔值,表示该项是否默认选中。一旦设为true,该项的值就是<select>的默认值。
  • form:返回<option>所在的表单元素。如果不属于任何表单,则返回null。该属性只读。
  • index:整数,表示该选项在整个下拉列表里面的位置。该属性只读。
  • label:字符串,表示对该选项的说明。如果该属性未设置,则返回该选项的文本内容。
  • selected:布尔值,表示该选项是否选中。
  • text:字符串,该选项的文本内容。
  • value:字符串,该选项的值。表单提交时,上传的就是选中项的这个属性。

Option() 构造函数

浏览器原生提供Option()构造函数,用来生成 HTMLOptionElement 实例。

new Option(text, value, defaultSelected, selected)

它接受四个参数,都是可选的。

  • text:字符串,表示该选项的文本内容。如果省略,返回空字符串。
  • value:字符串,表示该选项的值。如果省略,默认返回text属性的值。
  • defaultSelected:布尔值,表示该项是否默认选中,默认为false。注意,即使设为true,也不代表该项的selected属性为true
  • selected:布尔值,表示该项是否选中,默认为false
var newOption = new Option('hello', 'world', true);

newOption.text // "hello"
newOption.value // "world"
newOption.defaultSelected // true
newOption.selected // false

上面代码中,newOptiondefaultSelected属性为true,但是它没有被选中(即selected属性为false)。

公众号:AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发、Linux、Web 全栈」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh

C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh

方法一:QQopen in new window

方法二:微信:Jiabcdefh

上次编辑于:
贡献者: AndersonHJB,AI悦创
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度