乐趣区

关于前端:零基础教你学前端31下拉菜单

这节课,咱们学习表单下拉菜单控件。当用户点击抉择框的时候,会弹出一个下拉列表,用户能够从列表中抉择一个选项,咱们称这个控件为下拉菜单。

下拉菜单随处可见:购物商品配送的地址信息抉择,出生年月日的生日信息抉择等等。

在 HTML 中如何定义一个下 拉菜单呢?
能够应用 select 标签来定义,select 是抉择的意思。
根本语法为:<select><option></option></select>select 标签蕴含一个或多个 option 子标签。
option 是选项的意思,定义了一个能够被抉择的选项。<option></option>。留神:select 标签外面只能搁置 option 标签。
关上编辑器,新建一个 select_option.html 页面,主动补全根底代码,在 body 标签外部编写一个 form 表单标签,在 form 标签外面增加文本 出生日期:。
回车换行。接着增加一个 select 标签,默认 emmet 会给 select 定义 id 和 name 属性,咱们先删除这两个属性,当前咱们会接触到他们。
在 select 标签外部,应用 emmet 语句:option{199$}*9
主动生成一组 1991 年到 1999 年的选项。这里的 value 属性在前面介绍,先不必理会它。在浏览器中关上页面,一个简略的下拉菜单做好了。鼠标点击控件,弹出选项菜单,选中其中一个能够更换下拉菜单的选项。

刷新页面,咱们发现,默认状况下,第一个 option 1991 年作为以后选项,咱们能够批改这个默认值吗?
要更改默认选项,须要给 option 标签增加一个默认抉择的 selected 属性。回到编辑器,在 1995 年的 option 上定义 selected 属性。保留。

回到浏览器,刷新。1995 年就是默认的选项了。

有时,咱们还会遇到这样的多选下拉菜单,如何实现呢?咱们只须要给 select 标签定义一个 multiple 属性即可。multiple 是多个的意思,容许用户抉择一个以上 的值。

回到编辑器,在 select 标签完结的中央回车换行,增加一个 br,再回车换行。再增加一个 select 标签,在标签外部定义一个 option 标签,鼠标光标停留在以后行,同时按住键盘的 alt 和 shift 键不放,再敲击 7 下键盘的下箭头,复制出 7 个新的 option 标签。别离在 option 标签外部填入音乐,电影,短   视频,游戏,盲盒,漫画,小说,前端。最初给 select 定义一个属性 multiple,保留。

回到浏览器,刷新。应用 ctrl 配合鼠标点击,就能够抉择多个值了。当初 select 控件的默认可见行数为 4 行,能够设置这个值吗?给 select 标签定义 size 属性能够定义控件的默认可见行数,size 是尺寸的意思,值是一个数字。回到编辑器,给 select 标签再增加第一个 size 属性,值为 8,保留。回到浏览器,刷新。下拉菜单的全副选项都显示了。表单下拉菜单的制作咱们就讲完了,大家快来试一试吧!

文章配套视频链接点我

退出移动版