我们以英雄联盟大区服务器状态查询网站里的"下拉选择服务器状态"为例，先来看一下，什么是下拉列表，浏览器运行效果如下所示这就是下拉列表用到的地方之一，接下来我们就来学习一下HTML中的下拉列表

文章目录一：什么是HTML中的下拉列表1：select标签属性2：option标签属性

一：什么是HTML中的下拉列表

在HTML中，下拉列表是由select和option这两个表单标签一起使用来表示的。

语法

选项内容一……选项内容N

举例说明我以选择不同大区服务器为例，看一下下拉列表的效果，代码如下所示

请选择服务器艾欧尼亚黑色玫瑰比尔吉沃特弗雷尔卓德

浏览器运行效果如下所示可以看到，下拉列表默认是只显示一个选项，当我们点击了下拉列表后，才会看到全部选项，所以说下拉列表是一种最节省页面空间的方式。1：select标签属性

select标签常用属性有两个，如下表格所示属性解释说明multiple设置下拉列表可以选择多项size设置下拉列表显示几个列表项

①：multiple属性

默认情况下，下拉列表只能选择其中一项，我们可以通过multiple属性设置下拉列表可以选择多项。(multiple，中文是多种，众多的意思)

举例说明代码如下所示

哪些属于编程语言HTMLC#CSSJavaScriptMarkDown

可以看到，multiple属性没有属性值，因为这是HTML5的最新写法，和我们之前说到的单选框中的checked属性是一样的。

不过，如何实现多选呢？想要选取多项，可以使用“Ctrl+鼠标左键”来实现，浏览器运行效果如下所示②：size属性下拉列表默认显示一个，但如果你想自己设置默认显示几项，就需要用到size属性，代码如下所示

显示第一项显示第二项显示第三项显示第四项显示第五项

浏览器运行效果如下所示size的属性值是几，在浏览器里就默认显示几个选项。2：option标签属性

option标签的常用属性也是两个，如下表格所示属性解释说明selected是否被选中value选项值

①：selected属性如果你想给下拉列表设置一个默认选项，只需要在该项中加入selected属性即可，代码如下所示

显示第一项显示第二项显示第三项显示第四项显示第五项

默认选中“显示第四项”，浏览器运行效果如下所示

②：value属性可以说几乎所有表单元素都有value属性，这个属性一般和我们在标签内写入的内容是一致的，都是为了给JavaScript或者服务器进行交互使用。

代码如下所示

HTMLCSSJavaScriptjQueryReact

浏览器运行效果如下所示结束语如果这篇博客有幸帮到了您，欢迎点击下方链接，和更多志同道合的伙伴一起交流，一起进步。