首页 理论教育 HTML+CSS:单选下拉列表制作

HTML+CSS:单选下拉列表制作

时间:2023-11-16 理论教育 版权反馈
【摘要】:select元素具有以下一些属性:表8.5.1select元素的属性select元素需要通过添加若干子元素即option元素来定义下拉菜单中的选项。动手写8.5.1 使用单选的下拉列表“动手写8.5.1”定义了一个单选的下拉列表,在浏览器中列表会根据第一个option元素内的文本长度自适应宽度,默认被选中的也是第一个选项。其效果如图8.5.1所示:图8.5.1简单的下拉列表我们可以设置下拉列表中默认被选中的选项,方法是为选项添加属性selected。

HTML+CSS:单选下拉列表制作

HTML中使用select元素创建下拉选项菜单。select元素是一种表单控件,具有开始标签和结束标签。select元素具有以下一些属性:

表8.5.1 select元素的属性

select元素需要通过添加若干子元素即option元素来定义下拉菜单中的选项。选项option元素具有开始标签和结束标签,开始标签和结束标签中间的子元素必须是文本,这段文本是选项可见的文本。每个option元素一般都会带一个value属性,定义了本选项所代表的值。

动手写8.5.1 使用单选的下拉列表

“动手写8.5.1”定义了一个单选的下拉列表,在浏览器中列表会根据第一个option元素内的文本长度自适应宽度,默认被选中的也是第一个选项。其效果如图8.5.1所示:

图8.5.1 简单的下拉列表

我们可以设置下拉列表中默认被选中的选项,方法是为选项添加属性selected。

动手写8.5.2 设置默认选中项(www.xing528.com)

“动手写8.5.2”中的下拉列表为第四个option元素设置了selected属性,在浏览器中,我们看到的默认选中的项将不再是“埃及胡夫金字塔”,而是“奥林匹亚宙斯神像”。

提示

单选的下拉列表只有一个选项可以被选中。如果为同一个select元素中的多个option元素设置selected属性,后面选项的选中状态会覆盖前面选项的选中状态,最后一个设置selected属性的选项将被选中。

如果option元素没有定义value属性,那么option中的文本将被作为其value属性的值。

动手写8.5.3 没有定义value属性的选项

“动手写8.5.3”中,下拉列表的第一个选项option元素没有定义value属性,表单被提交之后,若选中的是第一个选项,那么服务器获得的fruit的值会是“没有定义value属性的选项”。

当我们希望默认选中的是空值的时候,应该定义一个value为空字符串的option元素。“动手写8.5.4”中的表单,如果用户使用默认的第一个选项提交表单,服务器得到的fruit的值将是空字符串。

动手写8.5.4 定义空默认值

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈